jquery在悬停时替换菜单项文本

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 属性。

• 除此之外，您只需使用属性 data-item 中的文本（可使用 $this.data("item") 访问）更新 a 元素 ($this.find("a")) 的文本。

您可以在下面找到工作的 sn-p：

$('.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

您需要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'))

})

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