Question

尝试在悬停时将变量附加到div中的一组链接，并在mouseout上删除。我有很多问题。

$('a').hover(function () {
    var link = $(this).attr("href");
    $(".box li a").attr("href", link + '?color=' + somerandomcolor);
});

HTML

<div class="box1">
   <ul>
      <li><a href="link1.html">Black</a></li>
      <li><a href="link2.html">Red</a></li>
      <li><a href="link3.html">Blue</a></li>
   </ul>
</div>

<div class="box2">
   <ul>
     <li><a href="link1.html">Green</a></li>
     <li><a href="link2.html">Red</a></li>
     <li><a href="link3.html">Blue</a></li>
   </ul>
</div>

注意到问题。这会添加变量，并且每次将鼠标悬停在链接上时都会继续添加变量，因此我最终会使用link.html？color = black？color = red。另一个问题是，如果我有另一个带有链接的box类的div，它也会更改这些链接。我想我正在寻找一种几乎可以重置每个mouseout的解决方案。谢谢你的帮助。

Answer 1

每次追加的原因是你没有定义任何函数来处理mouseout案例。

这是一个使用mouseover（）和mouseout（）的简单方法，

$(document).ready(function(){
$("a").mouseover(function(){
    var link = $(this).attr("href");
    $(this).attr("href", link + '?color=');    
});
$("a").mouseout(function(){
    var link = $(this).attr("href");
    var n = link.indexOf("?color=");
    link = link.substring(0,n);
    $(this).attr("href", link);    
});

}）;

更新：我添加了this关键字，该关键字只会改变单个链接，而不是所有a元素

Here is a demo

Answer 2

可以这样做：

$('a').hover(function (){
    var link = $(this).attr("href");
    $(this).attr("href", link + '?color=' + somerandomcolor);
}, function (){
    var link = $(this).attr("href");
    link = link.substring(0, link.indexOf('?'));
    $(this).attr("href", link);
});

FIDDLE：https://jsfiddle.net/lmgonzalves/f4dqqzju/2/

详细了解hover：https://api.jquery.com/hover/

将变量附加到悬停时的一组链接

2 个答案: