Question

$(document).ready(function()
{
    $for(i=1;i<8;i++)
    {
        $("#"+i).hover(function() {
             $("#"+i).stop().animate({left:"50px"});
        },
        function() {
             $("#"+i).stop().animate({left:"30px"});
        });
    } 
 });

我在这里使用循环来避免多次声明悬停功能它不起作用如何声明我的div id我的div id是1-7.plz告诉我如何我应该在循环中使用div ID。

Answer 1

看起来您使用数字作为ID，这是StackOverflow的一个很好的答案，它描述了如何创建ID：What are valid values for the id attribute in HTML?。

$(document).ready(function()
{
    for(var i = 1; i < 8; i++)//see that I removed the $ preceeding the `for` keyword, it should not have been there
    {
        $("#"+i).hover(function() {
             $(this).stop().animate({left:"50px"});//also notice that instead of using `"#" + i` as the selector inside the anonymous function I changed it to `this` so it properly references the hovered element
        },
        function() {
             $(this).stop().animate({left:"30px"});
        });
    } 
});

如果为所有绑定到的元素添加一个类，可以大大简化：

$(function()
{
    $(".hover-class").hover(function() {
         $(this).stop().animate({left:"50px"});
    },
    function() {
         $(this).stop().animate({left:"30px"});
    });
});

以下是此解决方案的演示：http://jsfiddle.net/FJQNa/

这将选择hover-class类的所有元素，并将mouseover / mouseout事件处理程序绑定到它们。

修改

通过使用逗号分隔选择器，您还可以使用ID一次选择多个元素：

$(function() { $("#ele-1, #ele-2, #ele-3, #ele-4, #ele-5, #ele-6, #ele-7").hover(function() { $(this).stop().animate({left:"50px"}); }, function() { $(this).stop().animate({left:"30px"}); }); });

jQuery中多个选择器的文档：http://api.jquery.com/multiple-selector/

Answer 2

这就是你在JavaScript中创建for循环的方法：

for(var i = 1; i < 8; i++)

不需要jQuery。

此外，您使用数字作为dom元素的ID，这是无效的。 ID应该以字母开头。

此外，那些内部函数正在使用你的循环变量，这是不可行的;因为每个处理程序正在关闭i，所以每个处理程序都会尝试选择元素8。

要将更改循环变量的当前值传递给基础事件处理程序，您必须像这样“打破关闭”：

$("#el"+i).hover(
    (function(local_i) { return function() {  $("#el"+ local_i).stop().animate({left:"50px"});  } })(i),
    (function(local_i) { return function() { $("#el" + local_i).stop().animate({left:"30px"}); } })(i) 
});

但你真的只是抓住你正在盘旋的东西，所以：

    $("#"+i).hover(function() {
         $(this).stop().animate({left:"50px"});
    },
    function() {
         $(this).stop().animate({left:"30px"});
    });

应该可以正常工作

Answer 3

使用this代替i。 i超出for循环，所以它总是试图访问$（'＃8'）`。

$(document).ready(function()
{
    for(var i=1; i<8; i++) //Declare var here otherwise it becomes global and that's not what you want for a simple counter
    {
        $("#"+i).hover(function() { //i is valid here because it gets used synchronously with the loop
             $(this).stop().animate({left:"50px"});
             //Use this instead of i because of "closure."
             //The anonymous function gain access to the variable to be
             // used later, but the loop will continue to increment,
             // changing the value.
        },
        function() {
             $(this).stop().animate({left:"30px"});
        });
    } 
});

Answer 4

类是更好的解决方案（另一个已经提出了这个解决方案）如果你绝对必须使用ID，这可能会更好一点：

var selector = "#1";
for(var i = 2; i < 8; i++)
   selector+=",#"+i;

$(selector).hover(
function() {
   $(this).stop().animate({left:"50px"});
},
function() {
   $(this).stop().animate({left:"30px"});
});

Answer 5

使用类不仅可以在语义上对它们进行分组，还可以使它们更容易选择。使用this。您还可以使用jQuery.each（）向所有选定元素添加行为。

$(function () {
    function move50 () {
        $(this).stop().animate({left: "50px"}, 500);
    }
    function move30 () {
         $(this).stop().animate({left: "30px"}, 500);
    }
    $(".mydiv").each(function (i, elem) {
        $(elem).hover(move50, move30);
    });
});

在此处试试 - http://jsfiddle.net/dkBY2/

在jquery中使用for循环

5 个答案: