Блог

У меня есть простой скрипт jquery, который изменяет URL-путь изображений. Единственная проблема заключается в том, что она не применяется после нажатия кнопки загрузить больше. Итак, я пытаюсь найти обходной путь, при котором он снова вызывает скрипт после нажатия кнопки.

 <script type='text/javascript'>
$(document).ready(function ReplaceImage() {
    $(".galleryItem img").each(function() {
        $(this).attr("src", function(a, b) {
            return b.replace("s72-c", "s300")
        })
    })
});
</script>
  

HTML

 <a href="javascript:;" onclick="ReplaceImage();">Load More</a>
  

Хотя ответ Кита даст вам то, что вы ищете, я действительно не могу рекомендовать такой подход. Вам намного лучше с чем-то подобным.

 <script type="text/javascript">
$(function() {

    var replaceImage = function() {
        $('.galleryItem img').each(function() {
            $(this).attr('src', function(index, value) {
                return value.replace('s72-c', 's300');
            });
        });
    };
    replaceImage();

    $('.js-replace-image').on('click', replaceImage);

});
</script>
  

Используя этот html

 <button class="js-replace-image">Load More</button>
  

Используя этот подход, вы не предоставляете никаких глобальных переменных объекту window, что может быть проблемой, если вы работаете с другими библиотеками (или разработчиками), которые плохо управляют своими глобальными файлами.

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

Я обновил тег привязки до кнопки из-за семантики того, что вам нужно сделать — он нигде не ссылается, это просто динамическая функциональность на странице. Для этого лучше всего подходят кнопки.

Я бы также рекомендовал поместить это в нижний колонтитул вашего сайта, потому что тогда, в зависимости от вашей ситуации, у вас уже будут правильно обновлены изображения без необходимости нажимать кнопку. Кнопка нужна только в том случае, если вы динамически вставляете больше изображений на страницу после загрузки, или если этот скрипт был в заголовке вашего документа (это означает, что jQuery еще не мог знать об изображениях).

Я надеюсь, что это поможет, обращайтесь, если у вас есть вопросы.