オブジェクトIDを変数にドラッグして最適化するjqueryで

Question

こんにちは私は、ここのようなものをクリックする方法があるかどうか疑問に思っていました。画像の1つがクリックされると、その変数のidを変数に代入してからif文を実行して、変数を使用した後に他のすべてのボックスをフェードアウトしてフェードインできるようにします。それ以外の場合は、IDをクリックすることで6つの別個の機能を作らなければならないでしょう。これは多くのコードになります これはレプリケートされている可能性を考慮して、このコードを最適化する最適な方法があるかどうかはわかりません。回私は基本的に1つにそれらをマージする方法が欲しい。私はしばらくの間、このを見てきたけど、多分別の視点を取得し、それを把握するように見えるカント一切の援助に感謝することは

jQuery(function(){ 
    jQuery(".catalignleft").click(function() { 


     function complete() { 
      jQuery(".alignleft"); 
     } 

     if(status == 1) { 
      jQuery("#box1").fadeOut(); 
      jQuery("#box2").fadeOut(); 
      jQuery("#box3").fadeOut(); 
      jQuery("#box4").fadeOut(); 
      jQuery("#box5").fadeOut(); 
      jQuery("#box6").fadeOut(); 
      jQuery("#box1").fadeIn(); 
      status--; 
     } else{ 
     jQuery("#box1").fadeIn(1600, "linear", complete); 
status++; 
} 



    }); 

    jQuery("#btn2").click(function() { 
    jQuery("#box1").fadeOut(); 

    jQuery("#log").empty(); 
    }); 
    jQuery(".blocked a").click(function(event) { 
    event.preventDefault(); 
    jQuery('<div/>') 
}); 


    jQuery("#btn2").click(function() { 

    jQuery("#box2").fadeOut(); 
    jQuery("#log").empty(); 
    }); 
}); 

Answer 1

はIDセレクタの代わりにクラスセレクタを使用し、その中で$(this).fadeInを置くのに役立ちます

$(".box").click(function() { 
    $(".box").fadeOut("slow", function() { 
     $(this).fadeIn(); 
    }); 
}); 

（すべてのボックスが "ボックス" のクラスを持っていると仮定すると）：

<div class="box"></div> 

---

このような fadeOutコールバック、

また、jQuery(...)を使用する理由はありません。 $(...)に短縮して、入力を省くことができます。

Answer 2

エリートが答えたところで、（jQueryを使用していなくても）を使って、現在のオブジェクト（この場合はクリックされたオブジェクト）を参照できます。