javascript - 单击其他列表项时淡出

Question

本周早些时候，我使用了一个教程来实现类似的功能，但我决定将其简化为基本功能。我希望用户能够单击他们想了解的瓶子，然后打开一个内容。但是如果一个人没有点击 X 而是点击其他瓶子，它应该淡出当前的内容然后显示新点击的那个。

我对 J Query 的了解有限，所以我知道我正在使用一种更长的技术，通过它们的 ID 来定位每个查询。如果有人可以给我看，我会喜欢一个结构更短的版本。

但根据我的知识，这是我可以构造的。

HTML

    <div id="two" class="colorbottle">
    <img src="images/2.png">
    </div>



    <div id="three" class="colorbottle">
    <img src="images/3.png">
    </div>



    <div id="four" class="colorbottle">
    <img src="images/4.png">
    </div>

    <div class="clearer"></div>
    </div>


    <div class="ei_descr" id="onedescr">
    <div class="contact_close">X</div>

        <h2>Gary</h2>
        <h3>Vocals</h3>
        <p>
        A wonderful serenity has taken possession of my
        entire soul, like these sweet mornings of
        spring which I enjoy with my whole heart.
        </p>
        <p>
        I am alone, and feel the charm of existence in
        this spot, which was created for the bliss of
        souls like mine.
        </p>
    </div>

    <div class="ei_descr" id="twodescr">
    <div class="contact_close">X</div>

        <h2>Gary</h2>
        <h3>Vocals</h3>
        <p>
        A wonderful serenity has taken possession of my
        entire soul, like these sweet mornings of
        spring which I enjoy with my whole heart.
        </p>
        <p>
        I am alone, and feel the charm of existence in
        this spot, which was created for the bliss of
        souls like mine.
        </p>
    </div>


    <div class="ei_descr" id="threedescr">
    <div class="contact_close">X</div>
        <h2>Gary</h2>
        <h3>Vocals</h3>
        <p>
        A wonderful serenity has taken possession of my
        entire soul, like these sweet mornings of
        spring which I enjoy with my whole heart.
        </p>
        <p>
        I am alone, and feel the charm of existence in
        this spot, which was created for the bliss of
        souls like mine.
        </p>
    </div>


    <div class="ei_descr" id="fourdescr">
    <div class="contact_close">X</div>

        <h2>Gary</h2>
        <h3>Vocals</h3>
        <p>
        A wonderful serenity has taken possession of my
        entire soul, like these sweet mornings of
        spring which I enjoy with my whole heart.
        </p>
        <p>
        I am alone, and feel the charm of existence in
        this spot, which was created for the bliss of
        souls like mine.
        </p>
    </div>

Javascript

$(document).ready(function() {


   $(".colorbottle").click(function () {
    if(!$(this).hasClass('selected'))
    {
        $(".colorbottle.selected").removeClass("selected");
        $(this).addClass("selected");        
    }
});


$("#one").click(function() {

    $("#onedescr").fadeIn(1000);
    $(".colorbottle").not( ".selected").animate({opacity:0.2});
    $(".selected").animate({opacity:1});

})

$(".contact_close").click(function() { 
$(".ei_descr").fadeOut("slow"); 
$(".colorbottle").animate({opacity:1});

 });


$("#two").click(function() {
    $("#twodescr").fadeIn(1000);
    $(".colorbottle").not( ".selected").animate({opacity:0.2});
    $(".selected").animate({opacity:1});

})

   $("#three").click(function() {
    $("#threedescr").fadeIn(1000);
    $(".colorbottle").not( ".selected").animate({opacity:0.2});
            $(".selected").animate({opacity:1});

})

$("#four").click(function() {
    $("#fourdescr").fadeIn(1000);
    $(".colorbottle").not( ".selected").animate({opacity:0.2});
            $(".selected").animate({opacity:1});

})

});

现在它所做的只是淡入被点击的瓶子，并使其他瓶子透明。 这是 fiddle

谢谢

Answer 1

你需要使用html data- attribute来存储点击瓶子div时需要显示的div的id:

HTML:

<div id="wrapcraft">
    <div id="one" class="colorbottle" data-id="onedescr">
        <img src="http://i61.tinypic.com/v8n2hv.png">
    </div>
    <div id="two" class="colorbottle" data-id="twodescr">
        <img src="http://i61.tinypic.com/v8n2hv.png">
    </div>
    <div id="three" class="colorbottle" data-id="threedescr">
        <img src="http://i61.tinypic.com/v8n2hv.png">
    </div>
    <div id="four" class="colorbottle" data-id="fourdescr">
        <img src="http://i61.tinypic.com/v8n2hv.png">
    </div>
    <div class="clearer"></div>
</div>
<div class="ei_descr" id="onedescr">
    <div class="contact_close">X</div>
     <h2>Gary</h2>

     <h3>Vocals</h3>

    <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
    <p>I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine.</p>
</div>
<div class="ei_descr" id="twodescr">
    <div class="contact_close">X</div>
     <h2>Gary</h2>

     <h3>Vocals</h3>

    <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
    <p>I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine.</p>
</div>
<div class="ei_descr" id="threedescr">
    <div class="contact_close">X</div>
     <h2>Gary</h2>

     <h3>Vocals</h3>

    <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
    <p>I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine.</p>
</div>
<div class="ei_descr" id="fourdescr">
    <div class="contact_close">X</div>
     <h2>Gary</h2>

     <h3>Vocals</h3>

    <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
    <p>I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine.</p>
</div>

JQUERY:

 $(document).ready(function () {

     $(".colorbottle").click(function () {
         if (!$(this).hasClass('selected')) {
             $(".colorbottle.selected").removeClass("selected");
             $(this).addClass("selected");
             $(".ei_descr").fadeOut(1000);
             $('#' + $(this).data("id")).fadeIn(1000);
             $(".colorbottle").not(".selected").animate({
                 opacity: 0.2
             });
             $(".selected").animate({
                 opacity: 1
             });
         }
     });

 });

UPDATED DEMO