如何使用jquery获得一个:focus~ .class css选择器？
如何使用jquery获得一个:focus~ .class css选择器？
提问于 2018-08-15 17:26:33
这是我的html的简化版本：
<li>
<a href="#" data-src="song Name.mp3">
<img src="front.jpg">Song Name.mp3</a>
<div class="hidden album">Album Name</div>
<div class="hoverdir">Path to album directory</div>
<div class="hidden artist">Artist Name</div>
</li>此时，如果"a“有焦点，则显示.hoverdir。我使用的是：
.hoverdir {display: none;}
a:focus ~ .hoverdir {display: block;}在我的css中实现这一点，它工作得很好。
我希望能够替换hoverdir中包含的一些文本，但我找不到jquery中正确的选择器。
如果满足某些条件，我需要替换其中的部分文本，这些加载是动态创建的。这只是一个例子。
任何帮助都将不胜感激。
回答 4
Stack Overflow用户
回答已采纳
发布于 2018-08-16 17:45:15
我把它修好了。在我的示例中，因为.hoverdir div是我使用的"a“元素下面的两个元素：
$(this).next().next()以查找.hoverdir div。
我使用了这个问题中的一种技术：JQuery: replace a string inside a div
oldhtml = $(this).next().next().html();
var newhtml = oldhtml.replace(/album/g, "");
$(this).next().next().html(newhtml);我不确定这是否是最好的方法，但它适用于我的情况。
Stack Overflow用户
发布于 2018-08-15 18:24:58
当a具有焦点时，选择a，find parent li标记，然后使用类hoverdiv查找子项，替换文本
$("a").on("focus",function() {
$(this).parent("li").find(".hoverdir").text("replacement text");
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li>
<a href="#" data-src="song Name.mp3">
<img src="front.jpg">Song Name.mp3</a>
<div class="hidden album">Album Name</div>
<div class="hoverdir">Path to album directory</div>
<div class="hidden artist">Artist Name</div>
</li>
Stack Overflow用户
发布于 2018-08-15 18:35:37
如果您想简单地从所有.hoverdir中剥离"Audio/Albums"部分，那么在解析DOM时遍历它们(onDOMContentLoaded)。只需使用Javascript就可以很容易地做到这一点，不需要jQuery。
document.addEventListener('DOMContentLoaded', function() {
var hoverdirs = document.getElementsByClassName('hoverdir');
for (var hoverdir of hoverdirs) {
hoverdir.textContent = hoverdir.textContent.replace('Audio/Albums', '');
}
}).hoverdir {
display: none;
}
a[data-src]:hover ~ .hoverdir {
display: block;
}<ul>
<li>
<a href="#" data-src="song Name.mp3">
Song Name.mp3</a>
<div class="hidden album">Album Name</div>
<div class="hoverdir">Audio/AlbumsVarious Artists/Album Name</div>
<div class="hidden artist">Artist Name</div>
</li>
</ul>
您也可以通过CSS交换文本：
a[data-src] ~ .hoverdir::before {
content: attr(data-text);
}
a[data-src]:hover ~ .hoverdir::before {
content: attr(data-hover-text);
}<ul>
<li>
<a href="#" data-src="song Name.mp3">
Song Name.mp3</a>
<div class="hidden album">Album Name</div>
<div class="hoverdir" data-text="Path to album directory" data-hover-text="Alternate text for link hover"></div>
<div class="hidden artist">Artist Name</div>
</li>
</ul>
当然，您必须在data-attribute中放入适当的文本。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51856147
复制相关文章
相似问题