Почему этот цикл jquery each() не работает с уникальными классами

Question

Я пытаюсь сделать работу функции jquery над классами с уникальным идентификатором. Но похоже, что это не добавление var к элемент ... Как мне это сделать

Мой код это ...

var x = 1; 
 
    $('.newest_posts').each(function() { 
 

 
     $('.showFull' + x).on('click', function(e) { 
 
     $('.newest_small' + x).hide(); // hide image preview on delete click 
 
     $('.newest_full' + x).show(); // hide image delete link on click 
 
     e.preventDefault(); 
 
     }); 
 

 
     x = x + 1; 
 
    });

Не очень хорошо разбираются в JQuery, но я споткнулся, потому что у меня есть этот код, который работает, чтобы скрыть их сначала

var i = 1; 
 
    $('.newest_posts').each(function() { 
 

 
     $('.newest_full' + i).hide(); 
 

 
     i = i + 1; 
 
    });

Answer 1

Вы должны задать вопрос: что делает x равный , когда обработчик щелчка называется? Он не будет равен значению x при регистрации обработчика, но будет равен значению x после завершения цикла.

Предполагая, что ничего другого не будет изменено, оно будет равно $(.newestPosts).length() + 2.

Вот быстрое решение для этой проблемы:

var x = 1; 
$('.newest_posts').each(function() { 
    var xCopy = x; 
    $('.showFull' + xCopy).on('click', function(e) { 
    $('.newest_small' + xCopy).hide(); // hide image preview on delete click 
    $('.newest_full' + xCopy).show(); // hide image delete link on click 
    e.preventDefault(); 
    }); 

    x = x + 1; 
}); 

Он создает новую переменную внутри области видимости функции обработки.

Еще лучше исправить это с помощью внешнего x и использовать первый параметр обработчика each, который будет индексом.

$('.newest_posts').each(function(index) { 
    var x = index + 1; 
    $('.showFull' + x).on('click', function(e) { 
    $('.newest_small' + x).hide(); // hide image preview on delete click 
    $('.newest_full' + x).show(); // hide image delete link on click 
    e.preventDefault(); 
    }); 
}); 

Answer 2

Вы должны сначала понять, что Javascript является асинхронным, и этот код не работает так, как можно было бы ожидать, что работать в синхронном языке программирования.

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

Вы можете сделать это следующим образом:

var x = 1; 
$('.newest_posts').each(function() { 

    $('.showFull' + x).on('click', function(e) { 
    var thisElementsIndex = $(this).attr("class").split(' ').filter(function(el){ 
     return el.indexOf('showFull') != -1 
    })[0].replace('showFull', ''); 
    $('.newest_small' + thisElementsIndex).hide(); // hide image preview on delete click 
    $('.newest_full' + thisElementsIndex).show(); // hide image delete link on click 
    e.preventDefault(); 
    }); 

    x = x + 1; 
}); 

Что здесь происходит, то «каждый» итерации с помощью переменной х убеждается, что все ваши классы запуска обратного вызова, которые при нажатии на них. В обратном вызове вы извлекаете значение для x из имени класса и передаете его в селектор hide/show.

Answer 3

Вы также можете использовать метод data() хранить его индекс для того, чтобы использовать его в функции OnClick элемента:

var x = 1; 
$('.newest_posts').each(function() { 

    $('.showFull' + x).data('index', x); 
    $('.showFull' + x).on('click', function(e) { 
    var index = $(this).data('index'); 
    $('.newest_small' + index).hide(); // hide image preview on delete click 
    $('.newest_full' + index).show(); // hide image delete link on click 
    e.preventDefault(); 
    }); 

    x = x + 1; 
}); 

Это имеет то преимущество, что сопоставляет каждую итерацию индекса к соответствующему элементу, позволяя другие функции извлечь выгоду из этого; также вам не нужно заботиться о значении x, объем которого выходит за пределы функции.