jQuery select增加ID的元素

  • Z时代
  • 2024-01-10
  • 分类：问答

我想选择基于增量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(); 
});

回答：

所以，你是通过循环（或通过努力回路）来分配你的悬停功能，为什么不使用类选择，而不是：

//changing # to . makes jquery select" title="jquery select">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>

回答：

没有看到所有的代码是很难确定的，但你能不能给你的所有列表项相同的类 - 如<li class="foo">

然后

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

回答：

你可以只使用一个父UL作为选择

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

回答：

而不是向每个列表项添加一个类，我只是通过ul选择它们。

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

以上是 jQuery select增加ID的元素 的全部内容， 来源链接： utcz.com/qa/265491.html

回到顶部