Нажмите кнопку и скрыть элемент «брат» и показать другой

Question

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

HTML:

<div id="ProductsIndex"> 
    <div class="product"> 
     <div class="product-detail"></div> 
     <div class="prod-box"></div> 
     <a class="btn-detail" href=""> <i class="fa fa-times"></i> </a> 
    </div> 

</div> 

JQuery:

$('#ProductsIndex .product .btn-detail').click(function(e) { 
    e.preventDefault(); 
    $('#ProductsIndex .product .prod-box').hide('slow'); 
    $('#ProductsIndex .product .product-detail').show('slow'); 

    $('#ProductsIndex .product .product-detail .fa-times').click(function(e) { 
     $('#ProductsIndex .product .product-detail').hide('slow'); 
     $('#ProductsIndex .product .prod-box').show('slow'); 
    }); 
}); 

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

Answer 1

Вы не должны связывать событие в обработчике событий.

Использование

$('.product .btn-detail').click(function(e) { 
    e.preventDefault(); 
    var parent = $(this).closest(".product"); 
    parent.find(".prod-box'").hide('slow'); 
    parent.find(".product-detail").show('slow'); 
}); 

$('.product .fa-times').click(function(e) { 
    var parent = $(this).closest(".product"); 
    parent.find(".prod-box'").show('slow'); 
    parent.find(".product-detail").hide('slow'); 
}); 

Answer 2

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

Во-вторых, вы можете использовать JQuery-х .closest() и .find() для обхода DOM, с щелкнул узлом в качестве начальной точки отсчета.

$('#ProductsIndex .product .btn-detail').on('click', function (e) { 
    e.preventDefault(); 
    $(this).closest("#ProductsIndex") 
     .find(".prod-box").hide('slow').end() 
     .find(".product-detail").show('slow'); 

}); 
$('#ProductsIndex .product .product-detail .fa-times').on('click', function (e) { 
    $(this).closest("#ProductsIndex") 
     .find(".product-detail").hide('slow').end() 
     .find(".prod-box").show('slow'); 
}); 

Примечание: Разумное использование .end() позволяет избежать ненужных заданий.