このelse文がトリガされないのはなぜですか？

Question

私は、あるクリックで別のdivを取得し、次のクリックでdivの上に来るようにdivを取得しようとしています。たとえば、div1がdiv2の背後にあり、div1をクリックすると、div2の前に表示されます。 div1をもう一度クリックすると（これはdiv2の前にあります）、div2の後ろに再び入るはずです。

私はdivのz-indexを調べて、if/elseステートメントでz-indexの値を上げるか下げるかを決めようとしています。しかし何らかの理由でelseがトリガされていない場合、if文だけを実行するように見えます。私は、z-indexが5その後、低いか高いかを探すためにしようとしているところ

The jsfiddle

次のコードは、（彼らは唯一の0または10可能であるが、これは何をするの良い確実な方法のように思えましたチェック）。問題は、z-indexが10になっても、if文がelseの代わりに実行されているということです。

if ($(".div1").css("z-index") < "5") { //is z-index smaller then 5? make it 10 
    $(".div1").click(function() { 
     $(this).css('z-index', '10'); 
     console.log('block1 if'); 
    }); 
} else { //is z-index bigger then 5? make it 0 
    $(".div1").click(function() { 
     $(this).css('z-index', '0'); 
     console.log('block1 else'); 
}); 
} 

私は問題が何であるか完全に迷っているので、すべての助けが歓迎です。 私の質問を読む時間をとってくれてありがとう！

Answer 1

これはあなたの問題を修正するかどうかは知りませんが、私はあなたがシングルクリックイベント内のあなたの場合/他を動かすべきだと思います。他の人が述べた。また同じように、あなたは文字列を比較しているint型ではなく、文字列

$(".div1").click(function() { 
     if ($(this).css("z-index") < 5) 
     { 
     $(this).css('z-index', '10'); 
     } 
     else{ 
     $(this).css('z-index', '0'); 
     } 
     console.log($(this).css('z-index')); 
    }); 

Answer 2

ifステートメントは、数値ではなく文字列を比較します。ここではそれらの外観を見ています。

if (parseInt($(".div1").css("z-index")) < 5) { 

Answer 3

と比較する必要があります。

if (parseInt($(".div1").css("z-index")) < 5) { 

Answer 4

私はあなたがint Stringに比較のためにそれが起こると思います。

例：

あなたはz-index:10でcss、あなたが文字列にintを比較し、その平均値"5"と比較した場合。

like this 10 < "5"

これはあなたの他の条件はあなたが関係なく、常に要素がクリックされたときに、彼らが何であるかの、同じ静的な値にZインデックスを設定している

Answer 5

をトリガしない理由です。あなたのクリックハンドラを見てください：

$(".div1").click(function() { 
    $(this).css('z-index', '10'); 
    console.log('block1 if'); 
}); 

だからいつでも .div1をクリックすると、そのZインデックスは 常には静的 '10'に設定されます。私はあなたが 内部のクリックハンドラを比較するためのもの疑う：

$('.div1').click(function() { 
    if ($(this).css('z-index') < '5') { 
     $(this).css('z-index', '10'); 
     console.log('block1 if'); 
    } else { 
     $(this).css('z-index', '0'); 
     console.log('block1 else'); 
    } 
}); 

---

また、あなたが文字列代わりの番号を比較しています。参考のために、"10"は、実際にはより小さく、"5"です。ただし、10は5より大きい。数字を比較したいかもしれません。

Answer 6

より良いアプローチ

Javascriptコード

$(".zIndex").click(function() {  
    if($(this).css('z-index') > 0){   
     $(".zIndex").css('z-index', '10');     
     $(this).css('z-index', '0'); 
    } 
    else{ 
     $(".zIndex").css('z-index', '0'); 
     $(this).css('z-index', '10');   
    } 
}); 

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    <div class="zIndex div1" style="z-index: 0;">A</div> 
    <div class="zIndex div2" style="z-index: 0;">B</div> 
    <div class="zIndex div3" style="z-index: 0;">C</div>