點擊事件揭示元素jQuery

Question

我有一個很簡單的問題，我似乎無法弄清楚語法。

我有一組相互疊放的圖像。 單擊圖像時，我希望單擊的圖像位於最前面，並在其上方顯示正確的描述。 我的代碼現在的結構方式是，將點擊的圖片帶到頂部的點擊效果很好。 但是，一旦單擊“ sxsw”圖像，說明將保留，而不是隨着我單擊其他照片而更改。 我猜這是因為“ sxsw”函數是最后一個運行的函數，我需要將這四個函數合並為一個，但是我不知道該怎么做。

謝謝！

的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

我假設在單擊描述的顯示CSS之前，它不是“ inline-block”，您需要重置此CSS，或者將其設置為“ 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")
});