Question

使用此代码：

<body>
    <div id="a1" style="width:200px; height:100px; background-color:black; margin:10px;"></div>
    <div id="a2" style="width:200px; height:100px; background-color:black; margin:10px;"></div>

    <script>
        i = 1;
        $("#a" + i).hover(function(){
            $("#a" + i).css("background-color", "grey");
        }, function(){
            $("#a" + i).css("background-color", "black");
        });

        i = 2;
        $("#a" + i).hover(function(){
            $("#a" + i).css("background-color", "grey");
        }, function(){
            $("#a" + i).css("background-color", "black");
        });
    </script>
</body>

我无法接收每个元素的悬停效果，当我在第一个鼠标上移动时，第二个元素发生了变化。我认为jquery与关于命令序列的javascript不一样，可能是第一个尚未运行的悬停。我可以使用队列函数来命令命令吗？

Answer 1

问题是因为处理程序是在加载时分配的，并且在mouseenter事件触发后的那一点之后执行得很好。因此，i 总是为2。

更好的方法是将相同的处理程序附加到两个元素，并使用处理程序中的this关键字将逻辑与引发事件的元素相关联。试试这个：

<div id="a1" class="foo"></div>
<div id="a2" class="foo"></div>

<script type="text/javascript">
    $('.foo').hover(function() {
        $(this).css("background-color", "grey");
    },
    function() {
        $(this).css("background-color", "black");
    });
</script>

Example fiddle

请注意，通过在元素上使用类，您可以将样式信息放入CSS样式表中，以便更好地分离关注点。

Answer 2

在执行功能时，i的值将为2，因此使用this代替选择器可以帮助您

i = 1;
$("#a" + i).hover(function () {
    $(this).css("background-color", "grey");
}, function () {
    $(this).css("background-color", "black");
});

i = 2;
$("#a" + i).hover(function () {
    $(this).css("background-color", "grey");
}, function () {
    $(this).css("background-color", "black");
});

我认为你正在重复你可以像下面这样写的代码。

for(var i=1;i<=2;i++){
    $("#a" + i).hover(function(){
            $(this).css("background-color", "grey");
        }, function(){
            $(this).css("background-color", "black");
        });
}

如何排队jquery命令

2 个答案: