点击事件揭示元素jQuery

Question

I have what I think is a pretty simple question, I just can't seem to figure out the syntax.

I have a group of images that are stacked on top of each other. When I click the images, I want the clicked image to come to the front, and the correct description to display above it. The way my code is structured right now, the click that brings the clicked image to the top works fine. However, once the "sxsw" image is clicked, the description stays instead of changing as I click other photos. I presume this is because the "sxsw" function is the last one that runs and I need to consolidate these four functions into one, but I can't figure out how.

Thank you!

HTML

<div class="viewercontainer">
        <div id="magnolia" class="viewer magnolia">
            <img class="image" src="magnolia/Magnolia3.jpg">
            <img class="image" src="magnolia/Magnolia1.jpg">
            <img class="image" src="magnolia/Magnolia2.jpg">
            <img class="image" src="magnolia/Magnolia4.jpg">
            <img class="image" src="magnolia/Magnolia5.jpg">
            <img class="image" src="magnolia/Magnolia6.jpg">
            <img class="image" src="magnolia/Magnolia7.jpg">
            <img class="image" src="magnolia/Magnolia8.jpg">
            <img class="image" src="magnolia/Magnolia9.jpg">
        </div>
        <div id="recipes" class="viewer recipes">
            <img class="image" src="recipes/Recipes1.jpg">
            <img class="image" src="recipes/Recipes2.jpg">
            <img class="image" src="recipes/Recipes3.jpg">
            <img class="image" src="recipes/Recipes10.jpg">
            <img class="image" src="recipes/Recipes11.jpg">
            <img class="image" src="recipes/Recipes4.jpg">
            <img class="image" src="recipes/Recipes5.jpg">
            <img class="image" src="recipes/Recipes12.jpg">
            <img class="image" src="recipes/Recipes6.jpg">
            <img class="image" src="recipes/Recipes7.jpg">
            <img class="image" src="recipes/Recipes8.jpg">
            <img class="image" src="recipes/Recipes13.jpg">
            <img class="image" src="recipes/Recipes9.jpg">
        </div>
        <div id="bowie" class="viewer bowie">
            <img class="image" src="bowie/bowie1.jpeg">
            <img class="image" src="bowie/bowie2.jpeg">
            <img class="image" src="bowie/bowie3.jpeg">
            <img class="image" src="bowie/bowie4.jpeg">
            <img class="image" src="bowie/bowiegif2.gif">
        </div>
        <div id="sxsw" class="viewer sxsw">
            <img class="image" src="sxsw/pics.png">
            <img class="image" src="sxsw/pics2.png">
            <img class="image" src="sxsw/pics3.png">
        </div>
        </div>
    </div>
    <div class="description" id="descriptionbowie">
        <p>DAVID BOWIE IS</p>
        <p>March, 2018</p>
        <br>
        <p>A poster series and companion GIF to advertise the final showing of the "David Bowie Is" Exhibit at the Brooklyn Museum. </p>
    </div>
    <div class="description" id="descriptionmagnolia">
        <p>MAGNOLIA</p>
        <p>December, 2017</p>
        <br>
        <p>A 300 page book I designed/typeset using the script from Paul Thomas Anderson's feature film "Magnolia." The story weaves together the lives of a multitude of characters over the course of the film. I incorporated a system in which the viewer can trace each character's individual story throughout the narrative. The book was printed by Lulu, a self-publishing platform. </p>
    </div>
    <div class="description" id="descriptionrecipes">
        <p>RECIPES FOR SOCIAL SUCCESS</p>
        <p>October, 2017</p>
        <br>
        <p>A satirical, fold out page "workbook/cookbook" that outlines "advice" for guaranteed romantic, social, and career-based success, (both authored and designed by myself.) Printed using a risograph.</p>
    </div>
    <div class="description" id="descriptionsxsw">
        <p>SXSW POSTER REDESIGN SERIES</p>
        <p>October, 2017</p>
        <br>
        <p>A series of posters I redesigned for South by Southwest, a yearly music and arts festival located in Austin, Texas. I created one large poster that listed the events, with two iterations of two supplemental posters that focused more on the details the music and arts festivals.</p>
    </div>

jquery

$(".bowie").click(function(){
    $(".magnolia, .recipes, .bowie, .sxsw").css("z-index","90");
    $("#descriptionbowie").css("display","inline-block")
    $(this).css("z-index","100")
});

$(".magnolia").click(function(){
    $(".magnolia, .recipes, .bowie, .sxsw").css("z-index","90");
    $("#descriptionmagnolia").css("display","inline-block")
    $(this).css("z-index","100")
});

$(".recipes").click(function(){
    $(".magnolia, .recipes, .bowie, .sxsw").css("z-index","90");
    $("#descriptionrecipes").css("display","inline-block")
    $(this).css("z-index","100")
});

$(".sxsw").click(function(){
    $(".magnolia, .recipes, .bowie, .sxsw").css("z-index","90");
    $("#descriptionsxsw").css("display","inline-block")
    $(this).css("z-index","100")
});

Answer 1

I am assuming that before the click the display css for the description is not "inline-block", you need to reset this css, or maybe set it to "none"

$(".bowie").click(function(){
    $(".magnolia, .recipes, .bowie, .sxsw").css("z-index","90");
    $("#descriptionrecipes").css("display","none");
    $("#descriptionmagnolia").css("display","none");
    $("#descriptionsxsw").css("display","none");
    $("#descriptionbowie").css("display","none");
    $("#descriptionbowie").css("display","inline-block")
    $(this).css("z-index","100")
});

$(".magnolia").click(function(){
    $(".magnolia, .recipes, .bowie, .sxsw").css("z-index","90");
    $("#descriptionrecipes").css("display","none");
    $("#descriptionmagnolia").css("display","none");
    $("#descriptionsxsw").css("display","none");
    $("#descriptionbowie").css("display","none");
    $("#descriptionmagnolia").css("display","inline-block")
    $(this).css("z-index","100")
});

$(".recipes").click(function(){
    $(".magnolia, .recipes, .bowie, .sxsw").css("z-index","90");
    $("#descriptionrecipes").css("display","none");
    $("#descriptionmagnolia").css("display","none");
    $("#descriptionsxsw").css("display","none");
    $("#descriptionbowie").css("display","none");
    $("#descriptionrecipes").css("display","inline-block")
    $(this).css("z-index","100")
});

$(".sxsw").click(function(){
    $(".magnolia, .recipes, .bowie, .sxsw").css("z-index","90");
    $("#descriptionrecipes").css("display","none");
    $("#descriptionmagnolia").css("display","none");
    $("#descriptionsxsw").css("display","none");
    $("#descriptionbowie").css("display","none");
    $("#descriptionsxsw").css("display","inline-block")
    $(this).css("z-index","100")
});