2

不知道如何解释这一点，我做了一个我正在尝试做的事情：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正确使用了选择器，非常感谢所有帮助。谢谢你</p>

4

3 回答 3

7

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

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

现场演示 ​</p>

于 2012-10-19T11:06:43.310 回答
2

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

正如@rahul 所做的那样；）

于 2012-10-19T11:07:24.977 回答
2

不要绑定事件条件，而是将条件放入事件中

现场演示

$('#aquariusIcnClick').click(function() {
    if ($('.killSelectedComp1').is(':visible')) {
        $('.killSelectedComp2').hide();
        $('#aquariusSelectedComp2').show();
    }
    else {
        $('.killSelectedComp1').hide();
        $('#aquariusSelectedComp1').show();
    }
});​
于 2012-10-19T11:07:40.330 回答