jQuery select增加ID的元素

我想選擇基於增量ID的列表項，但我有點麻煩。思考？jQuery select增加ID的元素

$(document).ready(function() { 

    var listCount = 1; 

    $('#listitem-' + listCount + ' a').hover(function() { 
      $('#anotheritem-' + listCount).show(); 
      return false; 
    }); 

    listCount++; 
});

HTML：

<ul id="cap"> 
    <li id="listitem-1"><a href="#">content 1</a></li> 
    <li id="listitem-2"><a href="#">content 2</a></li> 
    <li id="listitem-3"><a href="#">content 3</a></li> 
    <li id="listitem-4"><a href="#">content 4</a></li> 
</ul> 
<div style="display:none;" id="anotheritem-1">hello 1</div> 
<div style="display:none;" id="anotheritem-3">hello 3</div> 
<div style="display:none;" id="anotheritem-3">hello 3</div> 
<div style="display:none;" id="anotheritem-4">hello 4</div>

修訂問題。我試圖達到的回答如下修改：

$('.listitem_to_hover').hover(function() { 
    var senderID = sender.id.replace('listitem-', ''); 
    $('#anotheritem-' + senderID).show(); 
}, function() { 
    var senderID = sender.id.replace('listitem-', ''); 
    $('#anotheritem-' + senderID).hide(); 
});

來源

2011-05-29 klav

什麼樣的麻煩？你可以發佈你的HTML。您的代碼是在for或while循環中？你不能只用一個選擇器呢？ – Niklas 2011-05-29 20:14:37

它只是選擇第一個列表項目。我假設我的循環有問題。 – klav 2011-05-29 20:15:25

你可以請張貼你的循環，以及其他與此有關的其他內容。 – Niklas 2011-05-29 20:16:16

所以，你是通過循環（或通過努力迴路）來分配你的懸停功能，爲什麼不使用類選擇，而不是：

//changing # to . makes jquery select ALL of the elements with that class assigned. 

$('.listitem_to_hover').hover(function() { 
    $(this).toggleClass('current'); 
return false; 
});

HTML：

<ul id="cap"> 
    <li id="listitem-1" class="listitem_to_hover"><a href="#">content 1</a></li> 
    <li id="listitem-2" class="listitem_to_hover"><a href="#">content 2</a></li> 
    <li id="listitem-3" class="listitem_to_hover"><a href="#">content 3</a></li> 
    <li id="listitem-4" class="listitem_to_hover"><a href="#">content 4</a></li> 
</ul>

PS：您編輯的document.ready即使......你沒有一個循環？

* 好，根據你已經證明什麼，這應該得到你想要的，你想要的：*

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
    <script src="Scripts/jquery-1.5.1.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $('.listitem_to_hover').hover(function() { showItem(this); }, function() { hideItem(this); }) 
     }); 

     function showItem(sender) { 
     var senderID = sender.id.replace('listitem-', ''); 
     $('#anotheritem-' + senderID).fadeIn();// .removeClass('hidden'); 
    } 

    function hideItem(sender) { 
     var senderID = sender.id.replace('listitem-', ''); 
     $('#anotheritem-' + senderID).fadeOut(); //.addClass('hidden'); 
    } 
    </script> 
    <style type="text/css"> 
     .hidden 
     { 
      display: none; 
     } 
    </style> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 
     <ul id="cap"> 
      <li id="listitem-1" class="listitem_to_hover"><a href="#">content 1</a></li> 
      <li id="listitem-2" class="listitem_to_hover"><a href="#">content 2</a></li> 
      <li id="listitem-3" class="listitem_to_hover"><a href="#">content 3</a></li> 
      <li id="listitem-4" class="listitem_to_hover"><a href="#">content 4</a></li> 
     </ul> 
     <div class="hidden" id="anotheritem-1"> 
      hello 1</div> 
     <div class="hidden" id="anotheritem-2"> 
      hello 2</div> 
     <div class="hidden" id="anotheritem-3"> 
      hello 3</div> 
     <div class="hidden" id="anotheritem-4"> 
      hello 4</div> 
    </div> 
    </form> 
</body> 
</html>

來源

2011-05-29 20:20:31

因爲我最終會修改代碼以選擇另一個ID。例如＃listitem-1會顯示（）; ＃hiddenimage-1 – klav 2011-05-29 20:25:31

好的，那應該不重要。如果你要說的是'改變代碼，這樣當你將鼠標懸停在列表項目上時，隱藏圖像將以id顯示'，那麼你可以通過class來指定懸停函數，並且仍然可以識別源代碼的id李）在處理程序中，然後您可以顯示相應的圖像。 – 2011-05-29 20:31:47

是的，但相應的圖像不會位於LI內。我已更新我的原始文章，以提供更多詳細信息 – klav 2011-05-29 20:37:55

沒有看到所有的代碼是很難確定的，但你能不能給你的所有列表項相同的類 - 如<li class="foo">

然後

$(".foo a").hover(function() { 
    $(this).toggleClass('current'); 
});

來源

2011-05-29 20:18:34 isNaN1247

嗨，感謝您的回覆。我剛剛更新了我的原始條目。 – klav 2011-05-29 20:19:32

基於此 - 如果您爲每個li元素添加class =「foo」，則應該有關該代碼的工作 – isNaN1247 2011-05-29 20:20:37

你可以只使用一個父UL作爲選擇

$('#cap li a').hover(function() { 
     $(this).toggleClass('current');  
});

來源

2011-05-29 20:21:01 Niklas

而不是向每個列表項添加一個類，我只是通過ul選擇它們。

$('#cap li a').hover(function() { 
    $(this).toggleClass('current'); 
    return false; 
});

來源

2011-05-29 20:22:36 Andy

jQuery select增加ID的元素

回答

相關問題