Как я могу связать UJS с серией элементов, которые имеют один и тот же класс?

Question

Я не знаю, как перебирать что-либо в DOM, кроме элементов.

Итак, я знаю, как это сделать:

$("div").each(function (i) {
  if (this.style.color != "blue") {
    this.style.color = "blue";
  } else {
    this.style.color = "";
  }
});

Но я не знаю, как перебирать кучу объектов одного класса. Я не могу найти, как это сделать нигде. Кто-нибудь может помочь?

Я имею в виду, посмотрите на этот образец:

$(document.body).click(function () {
  $("div").each(function (i) {
    if (this.style.color != "blue") {
      this.style.color = "blue";
    } else {
      this.style.color = "";
    }
  });
});</script>

Серьезно? Хорошо, тогда почему во втором объявлении функции есть «i», а в первом нет? Какого черта это «я»? Почему он должен быть там, если на него нигде нет ссылок? И это с самого сайта jQuery. Боже, что мне не хватает?

Answer 1

i - это индекс итерации, аналогичный i, который вы использовали бы в структуре цикла for. Это необязательный параметр для каждого, потому что он не обязательно нужен, потому что, если индекс не имеет значения для вашей внутренней логики, он не имеет значения.

Обратите внимание, что jQuery.each(), вызываемый статически, отличается от того, который вызывается для коллекции jQuery. В первом случае i стоит первым, а второй аргумент является фактическим значением, и его можно использовать для перебора любого массива, подобного объекту.

$([1,2,3,4,5], function(i,value){
  alert(i + '=' + value);
});

Принимая во внимание, что при вызове коллекции вы должны использовать this для ссылки на значение, поскольку оно является элементом dom.

$('a[href]').each(function(i){
   alert(i + '=' + $(this).attr('href');
});

Теперь, что касается вашего вопроса относительно CSS:

Я хочу запустить этот пример кода в событии mouseover.

$('div').mouseover(function(event){
   var $this = $(this);
   if($this.css('color') != 'blue'){
     $this.css('color', 'blue');
   }
});

Большая часть функции jquery автоматически перебирает коллекцию, применяя обратный вызов oyur к каждому элементу коллекции. Поэтому, когда вы что-то делаете с событием, вам не нужно использовать each, это подразумевается функцией привязки события, которую вы вызываете. Кроме того, с помощью функций привязки событий вы не получаете индекс как аргумент вашего обратного вызова, вместо этого вы получаете объект event.

Однако в большинстве случаев вам на самом деле не нужен доступ к событию, поскольку this привязан к элементу, который вызвал событие, как правило, то, что вам нужно, если только вы не делаете что-то действительно сложное.

Answer 2

Если у вас возникли проблемы с размышлениями о том, как выбрать что-то в jQuery, перейдите на и прочитайте документацию по селекторам . Для ваших нужд:

$('.someclass').each(function(){
  var me = $(this);
  me.css('color', me.css('color')!='blue' ? 'blue' : '' );
});

Редактировать : на основе новой информации (желание связать с событием при наведении курсора):

$('.someclass').mouseover(function(){
  var me = $(this);
  me.css('color', me.css('color')!='blue' ? 'blue' : '' );
});

Answer 3

Документация jQuery для метода .each объясняет, какие параметры передаются в функцию.

jQuery.each (collection, callback (indexInArray, valueOfElement)) коллекция: объект или массив для итерации. обратный вызов (indexInArray, valueOfElement): функция, которая будет выполняться для каждого объекта.

Answer 4

Если ваши элементы имеют класс "test", тогда ваш jQuery будет выглядеть так:

    $(".test").each(function () {
      if (this.style.color != "blue") {
        this.style.color = "blue";
      } else {
        this.style.color = "";
      }
    });

Обновление: наведение мыши

    $(".test").mouseover(function () {
      if ($(this).css('color') != "blue") {
        $(this).css('color', 'blue');
      } else {
        $(this).css('color', '');
      }
    });