Кнопка «Загрузить больше» для нескольких галерей в Divi на одной странице ⇐ Jquery

[Anonymous]

У меня есть веб-сайт, созданный с помощью Divi, и на одной странице у меня есть несколько галерей (с классом .pa-gallery-load-more), каждая из которых изначально отображает 8 фотографий. Я добавил кнопку «Загрузить еще» (с идентификатором #pa_load_more), которая загружает больше фотографий при нажатии, используя следующий код:

Код: Выделить всё

jQuery(document).ready(function(){
//For mobile Screens
if (window.matchMedia('(max-width: 767px)').matches) {
var initial_show_images = 2;
var images_reveal = 2;
jQuery(".pa-gallery-load-more .et_pb_gallery_item").not( ":nth-child(-n+"+initial_show_images+")" ).css("display","none");
jQuery("#pa_load_more").on("click", function(event){
event.preventDefault();
initial_show_images = initial_show_images + images_reveal;
jQuery(".pa-gallery-load-more .et_pb_gallery_item").css("display","block");
jQuery(".pa-gallery-load-more .et_pb_gallery_item").not( ":nth-child(-n+"+initial_show_images+")" ).css("display","none");
var images_num = jQuery(".pa-gallery-load-more .et_pb_gallery_item").not('[style*="display: block"]').length
if(images_num == 0){
jQuery(this).css("display","none");
}

})
} else {
//For desktop Screens
var initial_row_show = 8;
var row_reveal = 8;
var total_images = jQuery(".pa-gallery-load-more .et_pb_gallery_item").length;
jQuery(".pa-gallery-load-more .et_pb_gallery_item").not( ":nth-child(-n+"+initial_row_show+")" ).css("display","none");

jQuery("#pa_load_more").on("click", function(event){
event.preventDefault();
initial_row_show = initial_row_show + row_reveal;
jQuery(".pa-gallery-load-more .et_pb_gallery_item").css("display","block");
jQuery(".pa-gallery-load-more .et_pb_gallery_item").not( ":nth-child(-n+"+initial_row_show+")" ).css("display","none");
var images_num = jQuery(".pa-gallery-load-more .et_pb_gallery_item").not('[style*="display: block"]').length
if(images_num == 0){
jQuery(this).css("display","none");
}
})
}
})

Проблема в том, что этот код заставляет все галереи на странице загружать больше фотографий при нажатии любой кнопки «Загрузить еще». Мне нужна каждая кнопка «Загрузить больше», чтобы загружать больше фотографий только в определенную галерею, к которой она принадлежит, а не во все галереи одновременно.
Я решила проблему, добавив фрагмент кода для каждой галерея, в которой я меняю класс галереи (.pa-gallery-load-more_1, .pa-gallery-load-more_2 и т. д.) и идентификатор кнопки (#pa_load_more_1, #pa_load_more_2 и т. д.). Однако мне было интересно, есть ли способ применить правило в исходном коде без необходимости вставки нескольких фрагментов.
Спасибо

Подробнее здесь: https://stackoverflow.com/questions/786 ... -same-page