Question

这是我的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中的正确选择器。

其中有许多是动态创建的，如果满足某些条件，我需要替换其中的部分文本。这只是一个例子。

任何帮助将不胜感激。

Answer 1

如果您真的想通过jquery使用它，则可以使用以下内容：

$("a").on("focus",function() {
  $(this).nextAll(".hoverdir").text("New TExt").show();
}).focusout(function() {
  $(this).nextAll(".hoverdir").hide();
})

演示

$("a").on("focus",function() {
  $(this).nextAll(".hoverdir").text("New TExt").show();
}).focusout(function() {
  $(this).nextAll(".hoverdir").hide();
})

.hoverdir{
display:none;}

<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>

Answer 2

在具有焦点的情况下选择a，找到父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>

Answer 3

如果只想从所有"Audio/Albums"中剥离.hoverdir部分，则在解析DOM（onDOMContentLoaded）时对其进行迭代。仅使用Java脚本即可轻松做到这一点，而无需使用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>

当然，您必须在数据属性中放入适当的文本。

Answer 4

您未提供某些CSS，但您指出了“显示”，但已显示出来，因此我广泛地假设您的.hidden CSS是display:none并使用该类。我添加了一个“歌曲”类，以帮助我直观地查看问题并在链接中使用它。

您没有指出要重点关注的内容，但我只是为了说明如何保存并恢复旧文本。

注意：没有理由您也不能“预先适应”它-即在启动时使用$("a.song").trigger('process');处理所有更改，所以我也证明了这一点。

$("a.song").on("focus process", function() {
  let hd = $(this).siblings(".hoverdir");
  //uncomment to save  hd.data("oldtext", hd.text());
  hd.text("New Text");
}).trigger('process');
/* uncomment to activate this
.on("focusout", function() {
  let hd = $(this).siblings(".hoverdir");
  let oldtext = hd.data("oldtext");
  console.log(oldtext);
  hd.text(oldtext);
});
*/

.hidden {
  display: none;
}

a.song:focus~.hoverdir {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li>
    <a class="song" href="#" data-src="song Name.mp3">
      <img src="front.jpg">Song Name.mp3</a>
    <div class="hidden album">Album Name</div>
    <div class="hidden hoverdir">Path to album directory</div>
    <div class="hidden artist">Artist Name</div>
  </li>
  <li>
    <a class="song" href="#" data-src="song Name.mp3">
      <img src="front.jpg">Song Name.mp3</a>
    <div class="hidden album">Album Name</div>
    <div class="hidden hoverdir">Path2 to album directory</div>
    <div class="hidden artist">Artist Name</div>
  </li>
</ul>

Answer 5

我知道了。在我的示例中，因为.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);

不确定这是否是最好的方法，但它适用于我的情况。

如何通过jquery获得a：focus〜.class CSS选择器？

5 个答案: