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/

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

Answer 1

您不需要在div条件上绑定您的点击，而是检查您的div可见性点击

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

Live Demo

Answer 2

您的代码仅在页面加载/或dom准备就绪时执行一次。这意味着您的if statement只会测试一次。您需要修改代码，以便在单击处理程序中发生if语句。这意味着每次点击发生时都会测试killSelectedComp1的可见性，然后您可以决定要做什么。

正如@rahul所做的那样;）

Answer 3

不要绑定事件条件而是将条件置于事件

中

<强> Live Demo

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

是（：visible）选择器不在类jQuery上工作

3 个答案: