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

[Anonymous]

У меня есть веб-сайт, построенный с Divi, и на одной странице у меня есть несколько галерей (с классом .pa-Gallery-load-more ), каждая из которых изначально отображает 8 фотографий. Я добавил кнопку «Загрузить больше» (с ID #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");
}
})
}
})

< /code>
Проблема заключается в том, что этот код вызывает все галереи на странице загружать больше фотографий, когда нажимается любая кнопка «Загрузить больше». Мне нужна каждая кнопка «загружать больше», чтобы загрузить больше фотографий в конкретной галерее, которой она принадлежит, не все галереи одновременно..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