Question

我有一个jQuery脚本替换鼠标上的.class ul li并在鼠标输出时恢复为默认值。我的问题是，当鼠标不在li时，第二个函数属性不起作用，不返回原始li，替换的li取代它。

脚本：

$('.header-nav li:nth-child(2)').hover(
    function() {
      $( this ).replaceWith('<li><div class="new-messages-f"></div><a href="">Account</a></li>'); // Replaced
    },function() {
      $( this ).replaceWith('<li><div class="new-messages-f">89</div><a href="">Ac</a></li>'); // Original
    });

HTML

<ul class="header-nav">
  <li><a href="">Logo Here</a></li>
  <li><div class="new-messages-f">89</div><a href="">Ac</a></li>
</ul>

Answer 1

当您替换元素时，您将从中删除事件绑定。我建议您在$ jq --slurpfile reviews reviews.json yelp.jq businesses.json元素上使用.html()而不是li：

replaceWith

检查这个小提琴：https://jsfiddle.net/x8L1y8xs/

Answer 2

出于某种原因，我觉得这种方式不那么多了，看看：

$('.header-nav li:nth-child(2)').on('mouseenter', function() {
    $(this).find('.new-messages-f').html('77');
    $(this).find('a').html('Account');
    $(this).find('a').attr("href", "http://www.google.com/");
});
$('.header-nav li:nth-child(2)').on('mouseleave', function() {
    $(this).find('.new-messages-f').html('89');
    $(this).find('a').html('Ac');
    $(this).find('a').attr("href", "http://www.yahoo.com/");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="header-nav">
  <li><a href="">Logo Here</a></li>
  <li style="background-color: lightgray;"><div class="new-messages-f">89</div><a href="">Ac</a></li>
</ul>

Answer 3

不是添加和删除元素，而是将两个版本放在HTML中并使用.hide()和.show()。

＆＃13;

$('.header-nav li:nth-child(2)').hover(function () {
    $(this).find(".in").show();
    $(this).find(".out").hide();
}, function () {
    $(this).find(".in").hide();
    $(this).find(".out").show();
});

＆＃13;

.header-nav .in {
    display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="header-nav">
    <li><a href="">Logo Here</a></li>
    <li>
        <div class="out">
            <div class="new-messages-f">89</div><a href="">Ac</a>
        </div>
        <div class="in">
            <div class="new-messages-f">89</div><a href="">Account</a>
        </div>
    </li>
</ul>

＆＃13;

replaceWith（）在.hover（）内部不起作用

3 个答案: