如何使用点击功能jQuery仅隐藏同一类中的元素

Question

I have 3 elements with the same classes, I want to click on the button "promo__main--details" and hide all content inside the <article> tag and show the <img> tag, but with my code it hides the same elements in the others <tags> , I was trying to use this method but it didn't work.

Here's my code.

   <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 no-space">
        <article class="promotions__item promo__one">
            <h2 class="promo__main--title">Esqui sin límites <br> en Colorado</h2>
            <h6 class="promo__main--subtitle">Epic Pass</h6>
            <span class="promo__main--details">Ver Más</span>
            <img src="images/promociones/promo2-2.jpg" alt="Promociones" width="100%" height:"auto">
        </article>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 no-space">
        <article class="promotions__item promo__two">
            <h2 class="promo__main--title">¡Promoción de Hospedaje <br> en Clásico Vail!</h2>
            <h6 class="promo__main--subtitle invisible">Epic Pass</h6>
            <span class="promo__main--details">Ver Más</span>
            <img src="images/promociones/promo2-2.jpg" alt="Promociones" width="100%" height:"auto">
        </article>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 no-space">
        <article class="promotions__item promo__three">
            <h2 class="promo__main--title">Tus fotos navideñas <br> en Canadá</h2>
            <h6 class="promo__main--subtitle">Mont Tremblant</h6>
            <span class="promo__main--details">Ver Más</span>
            <img src="images/promociones/promo2-2.jpg" alt="Promociones" width="100%" height:"auto">
        </article>
    </div>

And the JS:

$(".promo__main--details").click(function(){
    $(".promo__main--title", this).hide();
    $(".promo__main--subtitle", this).hide();
    $(".promo__main--details", this).hide();
    $(".promo__main", this).css({"padding":"0px", "min-height" : "auto"});
    $(".promo__main img", this).show();
});

Hope you guys can help me, Thanks!

Answer 1

JavaScript's this keyword refers to the clicked element. But it seems that you want to select elements within the parent <article> .

I suggest using jQuery's parent() to traverse from the clicked element to its parent <article> .

 $(".promo__main--details").click(function() { $article = jQuery(this).parent('article'); $(".promo__main--title,.promo__main--subtitle,.promo__main--details", $article).hide(); $("img", $article).show(); }); 

 article img { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 no-space"> <article class="promotions__item promo__one"> <h2 class="promo__main--title">Esqui sin límites <br> en Colorado</h2> <h6 class="promo__main--subtitle">Epic Pass</h6> <span class="promo__main--details">Ver Más</span> <img src="images/promociones/promo2-2.jpg" alt="Promociones" width="100%" height: "auto"> </article> </div> <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 no-space"> <article class="promotions__item promo__two"> <h2 class="promo__main--title">¡Promoción de Hospedaje <br> en Clásico Vail!</h2> <h6 class="promo__main--subtitle invisible">Epic Pass</h6> <span class="promo__main--details">Ver Más</span> <img src="images/promociones/promo2-2.jpg" alt="Promociones" width="100%" height: "auto"> </article> </div> <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 no-space"> <article class="promotions__item promo__three"> <h2 class="promo__main--title">Tus fotos navideñas <br> en Canadá</h2> <h6 class="promo__main--subtitle">Mont Tremblant</h6> <span class="promo__main--details">Ver Más</span> <img src="images/promociones/promo2-2.jpg" alt="Promociones" width="100%" height: "auto"> </article> </div> 

Answer 2

I think that this is more easy

jQuery

$(".promo__main--details").click(function(){
    $(this).closest('.content').hide();
    $(this).closest('article').children('.image').show();
});

CSS

article .image {
    display:none;
}

HTML

<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 no-space">
        <article class="promotions__item promo__one">
            <div class="content">
                <h2 class="promo__main--title">Esqui sin límites <br> en Colorado</h2>
                <h6 class="promo__main--subtitle">Epic Pass</h6>
                <span class="promo__main--details">Ver Más</span>
            </div>
             <div class="image">
                <img src="images/promociones/promo2-2.jpg" alt="Promociones" width="100%" height:"auto">
             </div>
        </article>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 no-space">
        <article class="promotions__item promo__two">
            <div class="content">
                <h2 class="promo__main--title">¡Promoción de Hospedaje <br> en Clásico Vail!</h2>
                <h6 class="promo__main--subtitle invisible">Epic Pass</h6>
                <span class="promo__main--details">Ver Más</span>
            </div>
            <div class="image">
                <img src="images/promociones/promo2-2.jpg" alt="Promociones" width="100%" height:"auto">
            </div>
        </article>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 no-space">
        <article class="promotions__item promo__three">
            <div class="content">
                <h2 class="promo__main--title">Tus fotos navideñas <br> en Canadá</h2>
                <h6 class="promo__main--subtitle">Mont Tremblant</h6>
                <span class="promo__main--details">Ver Más</span>
            </div>
            <div class="image">
                <img src="images/promociones/promo2-2.jpg" alt="Promociones" width="100%" height:"auto">
            </div>
        </article>
    </div>

A functional example

Answer 3

You can do this with a lot less code:

$(function(){
  $("body").on("click", "button.promo__main--details", function(){
    $(this).closest("article").find("*:not(button)").toggle();
  });
});

JSBIN

I made the assumption that you you wanted to hide everything except the button. Also, passed the context to the $ is pretty old fashioned. find() is a new method.