используя цикл в JQuery

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 идентификатор моего DIV было Ид 1-7.plz сказать мне, как я должен использовать div id внутри цикла.

Answer 1

Это как сделать цикл в JavaScript:

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

Нет Jquery не требуется.

Кроме того, вы используете числа как идентификаторы для ваших элементов dom, что является недопустимым. Идентификаторы должны начинаться с буквы.

Кроме того, эти внутренние функции используют переменную вашего цикла, которая не будет работать; вы завершите работу с каждым обработчиком, пытающимся выбрать элемент 8, поскольку каждый обработчик закрывается над i.

Чтобы передать текущее значение переменной меняющейся петли к основному обработчику событий, вы должны «разорвать замыкание», как это:

$("#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 2

похоже, что вы используете числа как идентификаторы, здесь отличный ответ на StackOverflow, который описывает, как создавать идентификаторы : 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.

EDIT

Вы также можете выбрать сразу с помощью идентификаторов несколько элементов, разделяя селекторы запятыми:

$(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"}); 
    }); 
}); 

Docs для нескольких селекторов JQuery: http://api.jquery.com/multiple-selector/

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

Классы будет лучшим решением (другой уже поставил это решение) Если вы абсолютно необходимо использовать идентификаторы это может работать немного лучше:

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/