是(:visible)选择器不在类jQuery上工作

Question

不知道如何解释这一点,我做了一个我试图做的事情的小提琴:http: //jsfiddle.net/x2btM/9/

这是我的代码:HTML:

<div id="ZodOneDragBox">
    <div id="aquariusSelectedComp1" class="killSelectedComp1" style="display:none;">
        <img src="some.jpg">
    </div>
</div>

<div id="ZodTwoDragBox">
    <div id="aquariusSelectedComp2" class="killSelectedComp2" style="display:none;">
        <img src="some.jpg" width="45" height="45">
    </div>
</div>


<div id="aquariusIcnClick" class="iconClicker">
        <img src="some_Icon.jpg" width="45" height="45">
</div>

这是我的jquery:

if ($('.killSelectedComp1').is(':visible')) {
    //--SELECT BOX TWO
    $('#aquariusIcnClick').click(function() {
        $('.killSelectedComp2').hide();
        $('#aquariusSelectedComp2').show();
    });


}
else {
    //--SELECT BOX ONE
    $('#aquariusIcnClick').click(function() {
        $('.killSelectedComp1').hide();
        $('#aquariusSelectedComp1').show();
    });

}?

基本上当你点击aquariusIcnClick图像时aquariusSelectedComp1会出现在div中ZodOneDragBox.现在可以看到aquariusSelectedComp1类killSelectedComp1,所以当您aquariusIcnClick再次单击该图标时,图像应该出现在ZodTwoDragBox.它适用于第一个框,但是选择器不会读取具有相应类的图像当前可见,因此执行if语句中的内容并在第二个框中显示图像.希望我能够很好地解释这一点,再一次,这是我的小提琴:

http://jsfiddle.net/x2btM/9/

我不确定我做错了什么,我用谷歌搜索确保我:visible正确使用选择器并且非常感谢所有帮助.谢谢

Answer 1

你不需要绑定你对div条件的点击,而是检查你的div可见性onclick

    $('#aquariusIcnClick').click(function() {
         if ($('.killSelectedComp1').is(':visible')) {       
           $('.killSelectedComp2').hide();
           $('#aquariusSelectedComp2').show();
         }
         else
         {
           $('.killSelectedComp1').hide();
           $('#aquariusSelectedComp1').show();
         }
    });

现场演示