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- 属性来存储div的id，需要在点击瓶子div时显示：

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

Answer 2

<div id="two" class="colorbottle" onlick = "goto('two')">

    <img src="images/2.png">
    </div>



    <div id="three" class="colorbottle" onlick = "goto('three')">
    <img src="images/3.png">
    </div>



    <div id="four" class="colorbottle" onlick = "goto('four')">
    <img src="images/4.png">
    </div>


    <script>
function goto(id){
    $("#"+id+"descr").fadeIn(1000);
    $(".colorbottle").not( ".selected").animate({opacity:0.2});
    $(".selected").animate({opacity:1});
}
<script>

Answer 3

您只需要在点击时告诉淡出淡出的描述，然后只点击您点击的那个：http://jsfiddle.net/Lvqn2sk5/5/

$('.ei_descr').fadeOut();
$('#'+this.id+'descr').fadeIn();

Answer 4

检查以下简化代码并使用demo

   $(".colorbottle").click(function () {
        $(".colorbottle").removeClass("selected");
        $(this).addClass("selected");

        var popupId= $(this).attr("id").split("_")[1];
        $("#"+popupId).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});
    });

此外，您需要重命名4瓶div的id（例如bootle1如下）

<div id="b_onedescr" class="colorbottle">

而不是

<div id="one" class="colorbottle">

单击其他列表项时淡出

4 个答案:

HTML：

JQUERY：