Question

我有以下简单的导航菜单（没有子菜单项），我需要将每个菜单项的文本在悬停时进行更改。默认文本在a href标记中，悬停文本在data-item属性中。我已经尝试过这里发布的一些jQuery代码的变体，但是我做得不好。任何帮助将不胜感激。

HTML

<ul id="menu">
    <li class="menu-item" data-item="Research"><a href="#research">01/08</a></li>
    <li class="menu-item" data-item="Awards"><a href="#awards">02/08</a></li>
    <li class="menu-item" data-item="Education"><a href="#education">03/08</a></li>
    <li class="menu-item" data-item="Publications"><a href="#publications">04/08</a></li>
</ul>

jQuery：

$('li > .menu-item').hover(
function() {
    var $this = $(this); // caching $(this)
    $this.data('a href', $this.text());
    $this.document.getElementById("data-item");
},
function() {
    var $this = $(this); // caching $(this)
    $this.text($this.data('a href'));
});

Answer 1

您的代码存在一些问题：

您不应有多个具有相同ID的元素。因此，我从元素中删除了ID属性，并将选择器从$("#menu-item")更改为$(".menu-item")。
$this.document.getElementById("data-item");这不仅是不必要的，而且是不正确的。 $(this)，即，要悬停的元素没有document属性。
除此之外，您只需要使用属性a中的文本来更新$this.find("a")元素（data-item）的文本（可使用$this.data("item")访问）

您可以在下面找到有效的代码段：

$('.menu-item').hover(
  function() {
    var $this = $(this); 
    var currentText = $this.text();
    var textToUpdate = $this.data("item");
    $this.data('a-href', currentText);
    $this.find("a").text(textToUpdate);
  },
  function() {
    var $this = $(this); 
    var textToUpdate = $this.data("a-href");
    $this.find("a").text(textToUpdate);
  }
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul id="menu">
  <li class="menu-item" data-item="Research"><a href="#research">01/08</a></li>
  <li class="menu-item" data-item="Awards"><a href="#awards">02/08</a></li>
  <li class="menu-item" data-item="Education"><a href="#education">03/08</a></li>
  <li class="menu-item" data-item="Publications"><a href="#publications">04/08</a></li>
</ul>

Answer 2

您需要Item ----------------------------------------- 7024 BDD39 BioxDD 39 RMA0005 7024 BDD39 BioxDD 39 RMW0006 7024 BDD39 BioxDD 39 RMS0005 7024 BDD94 BioxDD 94 RMH0007 7024 BDD94 BioxDD 94 RMA0007 7024 BDD94 BioxDD 94 RMW0010 7024 BDD94 BioxDD 94 RMS0009和mouseover。此外，您还可以创建另一个数据属性，例如mouseleave来存储日期，并避免变量保持跟踪

data-dt

$('.menu-item').on('mouseover', function() {
  $(this).find('a').text($(this).data('item'))
})
$('.menu-item').on('mouseleave', function() {
  $(this).find('a').text($(this).data('dt'))

})

jQuery替换悬停菜单项文本

2 个答案: