複数のセレクタでJqueryを切り替える

Question

IDが異なる2つの画像があります。＃pic1と＃pic2と言うことができます。私は両方のセレクタをトグルに追加しようとしましたが、両方とも同じ要素を個別に切り替えるため、最初のピクチャをクリックしてから2番目のものをクリックすると、2番目のトグルはターゲットdivを切り替えません。 。たとえば、100pxを左にスライドさせてから100pxを右にスライドすると#pic1をクリックすると100pxが左にスライドしますが、＃pic2をクリックすると100pxだけ左にスライドします。誰かが私にどのような方向を見なければならないかというアイデアを教えてもらえますか？

$('#pic1,#pic2').toggle(
function() 
{ 
    $('#mylayer').delay(1000).animate({left: "+=100"}); 
    $('#overlay').animate({opacity: 0.8}); 
}, 
function() 
{ 
    $('#mylayer').animate({left: "-=100"}); 
    $('#overlay').delay(1000).animate({opacity: 0}); 
}); 

Answer 1

両方のクリックに対して一度オープン/クローズ状態を追跡し、グローバル変数を使用しないようにし、複数の場所を使用するには、これはより拡張可能にするためにjQueryのデータ機能を使用していますこのような何か試してみてください：

を

$('#pic1,#pic2').click() { 
    var mylayer = $("#mylayer"); 
    var open = mylayer.data("open"); 
    if (open) { 
     mylayer.animate({left: "-=100"}); 
     $('#overlay').delay(1000).animate({opacity: 0}); 
     mylayer.data("open", false); 
    } else { 
     mylayer.delay(1000).animate({left: "+=100"}); 
     $('#overlay').animate({opacity: 0.8}); 
     mylayer.data("open", true); 
    } 
}