Question

我想根据递增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();
});

Answer 1

如果没有看到您的所有代码，很难确定，但是您是否可以将所有列表项都放在同一个类中 - 例如<li class="foo">

然后

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

Answer 2

因此，您正在循环（或尝试循环）来分配您的悬停函数，为什么不使用类选择器：

//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>

Answer 3

您可以使用父ul作为选择器

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

Answer 4

而不是为每个列表项添加一个类，我只需在ul。

上选择它们

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

jQuery选择具有递增ID的元素

4 个答案: