jquery添加指向導航的指針

我遇到問題。每次我將鼠標懸停在我的列表上（無論它是哪個列表項），類會在整個列表中添加.hover。所以班級是。我意識到我通過jQuery添加了這些，但如何讓jquery只添加一個列表錨點而不是全部錨點。jquery添加指向導航的指針

$('.menuContainer li a').append('<span></span>'); 

$(".menuContainer li a").mouseover(
     function() { 
      $(this).addClass("over"); 
      $('.menuContainer li a span').addClass('hover'); 
     return false; 
}); 
$(".menuContainer li a").mouseout(
     function() { 
      $(this).removeClass("over"); 
      $('.menuContainer li a span').removeClass('hover'); 
     return false; 
}); 

<div class="menuContainer"> 
<ul> 
<li class="1"> 
<a href="#">list item<span></span></a> 
</li> 
<li class="2"> 
<a href="#">list item<span></span></a> 
</li> 
<li class="3"> 
<a href="#">list item<span></span></a> 
</li> 
</ul> 
</div>

我的目標是讓類有一個背景圖像，這將是一個指針，強調當前被挖出的東西。

來源

2011-01-14 arkjoseph

只是爲了清楚起見，（因爲你有兩個很好的答案如下圖）需要記住的是jQuery的默認情況下所有元素相匹配是非常重要的。 – jcolebrand 2011-01-14 02:45:58

因爲你要選擇的當前錨的跨度，你應該使用下面的符號$("span", this)作爲選擇......是這樣的：

$('.menuContainer li a').append('<span></span>'); 

$(".menuContainer li a").mouseover(
     function() { 
      $(this).addClass("over"); 
      $("span", this).addClass('hover'); 
     return false; 
}); 
$(".menuContainer li a").mouseout(
     function() { 
      $(this).removeClass("over"); 
      $("span", this).removeClass('hover'); 
     return false; 
});

在本post它執行指出指定的選擇器元素中的.find（）。

希望幫助:)

來源

2011-01-14 02:22:51

打我30秒;） – jlmakes 2011-01-14 02:25:07

Damien-at-SF的答案是不夠公平的。但我認爲這隻會增加另一項工作。

爲什麼不留下你的代碼，因爲它是和css玩。如果你想樣式化<span>的，像這樣做，

.menuContainer li a.over span { .... } 
.menuContainer li a.over span.hover { .... }

和我的經驗，最好是添加/刪除類（以這樣的情況），在那裏你可以有兄弟姐妹關係（在這種情況下，<li>'s）。

那麼你的代碼將被縮短到這樣的事情，

$(".menuContainer li a").mouseover(
    function() { 
     $(this).closest('li').addClass("over").find('span').addClass('hover') 
     .end().siblings().removeClass("over").find('span').removeClass('hover'); 
}).append('<span></span>');

來源

2011-01-14 02:31:18 Reigel

jquery添加指向導航的指針

回答

相關問題