Как настроить динамически именованные идентификаторы элементов с помощью jQuery (wordpress)

Question

Я создаю тему wp, которая вызывает все страницы, сделанные на домашней странице. Эти идентификаторы страницы (post) называются динамически, используя следующий php id="post-<?php the_ID(); ?>". Они в конечном итоге называются # post-1, # post-2, # post-3 и т. Д.

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

Проблема заключается в том, что я не знаю, как изолировать ТОЛЬКО раздел, в котором кнопка вложена. В настоящее время, когда пользователь нажимает кнопку, он добавляет класс к каждому экземпляру на главной странице (каждая страница (сообщение), вызываемая на домашнюю страницу).

Кто-нибудь знает, как я могу написать jQuery, который позволит мне настроить таргетинг каждого раздела отдельно с помощью динамически названных сообщений без фактического ввода #post-1, #post-2, post-3, etc... в функцию jQuery?

Вот упрощенная версия того, что я делаю именно:

$('.open-entry').click(function(){ 
 
    \t $(".home-article").addClass("open"); 
 
\t });

.content {display: none;} 
 
    #home-article.open .content {display: block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<article id="post-<?php the_ID(); ?>" class="home-article"> 
 
\t \t <header class="home-closed-entry-header"> 
 
\t \t \t <button class="open-entry">explore</button> 
 
\t \t </header> <!-- .home-closed-entry-header --> 
 

 
     <div class="content"> 
 
\t \t \t ...some content 
 
\t \t </div> <!-- .content --> 
 
\t </article> <!-- .home-article -->

Любая помощь, как всегда с благодарностью! спасибо!

Answer 1

Использовать траверсы. Внутри обработчика события this относится к событию элемента, которое произошло. Учитывая, что в качестве отправной точки вы можете пройти через часть йот необходимых

closest() может принять вас к главному <article> то оттуда вы можете использовать find() посмотреть в этом случае

$('.open-entry').click(function(){ 
    var $article = $(this).closest(".home-article").addClass("open"); 
    $article.find('.content').doSomething(); 
}); 

Answer 2

На основе вашего примера существует несколько способов изолировать section, начиная с контекста кнопки.

Если структура всегда <section><header><button> то, начиная с кнопки вы можете просто пойти на двух родителей:

$("button").click(function() { 
    var thePost = $(this).parent().parent(); 
    ... 
}); 

Если будет только один section элемент над кнопкой, то вы можете посмотреть на родителей, что это раздел элемент:

$("button").click(function() { 
    var thePost = $(this).parents("section"); 
    ... 
}); 

Если вы ищете родитель, чей идентификатор начинается с «пост-» вы можете относиться к ID в качестве атрибута и использовать «атрибут начинается с» селектором:

$("button").click(function() { 
    var thePost = $(this).parents("[id^=post-]"); 
    ... 
});