Изменить / увеличить значение переменной для URL-адреса загрузки в режиме onclick

Question

У меня есть кнопка «Загрузить еще» на моей странице

<a class="btn btn-link border-top px-3 mt-5" role="button" id="reveal">Load more</a></p>

И функция onclick, которая загружает контент внутри этого div:

<div id="ajax-content" class="row m-0">

        </div>

Сценарий работает и загружает больше контента каждый раз Я нажимаю кнопку:

<script>
$('#reveal').on('click', function() {
  $('#ajax-content').load('/wp-content/themes/template/ajax-news.php?offset=4');
  $('#ajax-content').attr('id', '#ajax-contented');
})
</script>

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

Answer 1

Для этого вы можете использовать атрибут data для элемента a, который вы увеличиваете на 4 при каждом последующем событии щелчка:

$('#reveal').on('click', function(e) {
  e.preventDefault();
  let offset = ($(this).data('offset') || 0) + 4;
  
  //$('#ajax-content').load('/wp-content/themes/heidner/ajax-aktuelt.php?offset=' + offset);
  $('#ajax-content').html(offset);
  $(this).data('offset', offset);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p><a href="#" class="btn btn-link border-top px-3 mt-5" role="button" id="reveal">Last flere saker</a></p>
<div id="ajax-content" class="row m-0"></div>

Это также возможно с глобальной переменной, но это плохая практика, и ее следует избегать, где это возможно.

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