jQuery скрыть / показать заданный c элемент div

Question

Это мой html код

<div class="w-grid-list">
<article class="w-grid-item">
    <div class="w-grid-item-h">
        <div class="w-vwrapper">
            <div class="w-post-elm">
                <img width="350" height="233" src="#" sizes="350px">
            </div>
            <div class="product_details" style="display: none;">
                <div class="w-post-elm post_content usg_post_content_1">
                    <p class="prod_text desktop_prod_text" style="display: block;">Солодкі млинці з яблучним варенням.<br>
                        <strong>200 г &nbsp;&nbsp; 714 ккал</strong>
                    </p>
                </div>
            </div>
            <h2 class="product_title">Млинці з сиром та курагою</h2>
            <div class="w-hwrapper">
                <div class="w-post-elm">
                    <span class="w-post-elm-before">Weight: </span>
                    <span class="woocommerce-product-attributes-item__value">200 g</span>
                </div>
            </div>
        </div>
    </div>
</article>
<article class="w-grid-item">
    <div class="w-grid-item-h">
        <div class="w-vwrapper">
            <div class="w-post-elm">
                <img width="350" height="233" src="#" sizes="350px">
            </div>
            <div class="product_details" style="display: none;">
                <div class="w-post-elm post_content usg_post_content_1">
                    <p class="prod_text desktop_prod_text" style="display: block;">Солодкі млинці з яблучним варенням.<br>
                        <strong>200 г &nbsp;&nbsp; 714 ккал</strong>
                    </p>
                </div>
            </div>
            <h2 class="product_title">Млинці з сиром та курагою</h2>
            <div class="w-hwrapper">
                <div class="w-post-elm">
                    <span class="w-post-elm-before">Weight: </span>
                    <span class="woocommerce-product-attributes-item__value">200 g</span>
                </div>
            </div>
        </div>
    </div>
</article>
</div>

Когда пользователь нажал на тег H2 (с классом 'product_title'), то скрыл элемент DIV (с классом 'product_details') этого тега Article, а не другой элемент Div за пределами этой статьи .tag

Это мой jQuery код:

jQuery('.product_details').hide();
jQuery('.product_title').click(function(e){  
e.preventDefault();
// hide all span
var $this = jQuery(this).parent().find('div');
jQuery(".product_details").not($this).hide();

// here is what I want to do
$this.toggle();

});

Но этот код не работает должным образом

Answer 1

Для этого вы можете использовать метод .prev(), например:

$('.product_title').click(function(){
   $(this).prev('.product_details').hide();
})

Используя $(this), мы нацеливаемся только на product_details div до текущего элемента product_title, на который щелкнули в данный момент.

Answer 2

Элемент, на который вы хотите нацелиться, является родственным элементом, вызывающим событие click, поэтому вы можете использовать метод .siblings (), чтобы выбрать предыдущий элемент, или вы также можете переместить dom к родительскому элементу (article ) затем выберите элемент, на который вы хотите настроить таргетинг, с помощью метода .find ():

$(".product-title").on('click', function () {
  $(this).siblings('.product-details').hide('fast');
});
// OR
$(".product-title").on('click', function () {
  $(this).closest('article').find('.product-details').hide('fast');
});