Javascript 单击按钮时隐藏css动画后面的div

作为当前时间，我有CSS3动画被触发按钮点击，所有工作正常。它是一个代表植物生命周期的动画，分5个阶段工作，每个阶段显示一个图像和相应的文本

但是，如果我单击第1阶段，然后单击第2阶段，并希望再次单击第1阶段以再次查看支持文本，同时对第2阶段隐藏图像，我似乎无法做到这一点

JSFIDLE为您提供方便：

现阶段实况：

Javascript:

$(function() {  
    $("#stage1").click(function() {  
        $("#Seed1,#infoBox1").toggleClass("animate")   
    });  
    $("#stage2").click(function() {  
        $("#Seed2,#infoBox2").toggleClass("animate")   
    });  
    $("#stage3").click(function() {  
        $("#Seed3,#infoBox3").toggleClass("animate")   
    });  
    $("#stage4").click(function() {  
        $("#Seed4,#infoBox4").toggleClass("animate")   
    });
    $("#stage5").click(function() {  
        $("#Seed5,#infoBox5").toggleClass("animate")   
    });
}); 

正在设置动画的HTML段：

<div id="Seed1" class="target">
</div> <!-- end of Seed1 -->
<div id="infoBox1">
Text for stage 1 Text for stage 1 Text for stage 1 Text for stage 1 Text for stage 1 
</div>

---

假定“animate”是“on”类（看起来是），尝试创建一个重置所有内容的方法，然后为特定元素设置动画：

function resetState() {
     //you can use classes here to make it neater
     $("#Seed1,#infoBox1,#Seed2,#infoBox2,#Seed3,#infoBox3,#Seed4,#infoBox4,#Seed5,#infoBox5").removeClass("animate");  
}

function setStage(stage) {

     var numberOfStages = 5;

     for (i=1; i <= numberOfStages; i++) {
         if (i == stage) {
             $("#infoBox" + i).addClass("animate");
             $("#Seed" + i).addClass("animate");
         } else if (i < stage) {
             $("#infoBox" + i).removeClass("animate");
             $("#Seed" + i).addClass("animate");
         } else {
             $("#infoBox" + i).removeClass("animate");
             $("#Seed" + i).removeClass("animate");
         }
     }

}

示例用法：

$("#stage1").click(function() {  
    resetState();
    $("#Seed1,#infoBox1").toggleClass("animate");   
}); 

$(document).ready(function() {

    $("#stage1").click(function() {  
        setStage(1);  
    }); 

    //stage 2,3,5 etc...

    $("#stage4").click(function() {  
        setStage(4);  
    }); 

});

---

假定“animate”是“on”类（看起来是），尝试创建一个重置所有内容的方法，然后为特定元素设置动画：

function resetState() {
     //you can use classes here to make it neater
     $("#Seed1,#infoBox1,#Seed2,#infoBox2,#Seed3,#infoBox3,#Seed4,#infoBox4,#Seed5,#infoBox5").removeClass("animate");  
}

function setStage(stage) {

     var numberOfStages = 5;

     for (i=1; i <= numberOfStages; i++) {
         if (i == stage) {
             $("#infoBox" + i).addClass("animate");
             $("#Seed" + i).addClass("animate");
         } else if (i < stage) {
             $("#infoBox" + i).removeClass("animate");
             $("#Seed" + i).addClass("animate");
         } else {
             $("#infoBox" + i).removeClass("animate");
             $("#Seed" + i).removeClass("animate");
         }
     }

}

---

虽然这几乎符合我的要求，但是否有任何方法可以修改给出的示例，使图像保持（#Seed1），同时#infoBox1,2,3,4,5更改？您可以发送不想重置的图像id，我将在单独的回答中添加它。如果按照建议更改了重置状态，但它仍然一次只显示一个图像，而不是一种进步的风格。（原始问题中的实时链接就是一个例子）好的，我想我现在得到了你想要的-文本bx应该是最后点击的那个，图像应该显示到我们点击的最后一个阶段的所有阶段（种子）。是这样吗？假设点击了阶段1：显示阶段1的文本和图像。单击阶段2：显示阶段2的文本和阶段1和阶段2的图像，依此类推。然而，我仍然希望能够点击任何按钮以任何顺序查看，而之前的种子图像是keptYeah，这就是我的意思。我已经编辑了答案，它应该做你想做的事情。这个编辑过的答案会取代我以前所有的JS吗？