具有递增ID的jQuery select元素
具有递增ID的jQuery select元素
提问于 2011-05-30 04:13:41
我想根据它们的递增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();
});回答 4
Stack Overflow用户
回答已采纳
发布于 2011-05-30 04:20:31
因此，您正在遍历(或尝试遍历)以分配悬停函数，为什么不使用类选择器来代替：
//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>Stack Overflow用户
发布于 2011-05-30 04:18:34
在看不到所有代码的情况下，很难确定，但你能不能不给所有列表项分配相同的类--例如<li class="foo">
然后
$(".foo a").hover(function() {
$(this).toggleClass('current');
});Stack Overflow用户
发布于 2011-05-30 04:21:02
您可以只使用父ul作为选择器
$('#cap li a').hover(function() {
$(this).toggleClass('current');
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/6170154
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号