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ステートメントの内容を実行し、2 番目のボックスに画像を表示しています。これを十分に説明したいと思います。もう一度、ここに私のフィドルがあります：

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 の準備ができたときに 1 回だけ実行されます。これは、あなたif statementが一度だけテストされることを意味します。クリック ハンドラー内で if ステートメントが発生するように、コードを変更する必要があります。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 に答える