javascript - 是(:visible) selector not working on class 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 语句中的内容并在第二个框中显示图像。希望我解释得足够好，再一次，这是我的 fiddle :

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

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

Answer 1

您不需要绑定(bind)点击 div 条件，而是检查您的 div 可见性 onclick

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

Live Demo