jqueryのアンカーに関数を無効にします

StackOverflow https://stackoverflow.com/questions/4531917

  •  13-10-2019
  •  | 
  •  

質問

これは、jqueryを持つ外部.jsで書かれています...

私は次のように視界から外れてスライドする2つのウィンドウがあります：

$(document).ready(function() {
  // hides gallery1 as soon as the DOM is ready  
  $('#gallery1').hide();  
  // shows the menu on click   
  $('#showgal1').click(function() {  
    $('#gallery1').delay(490).show('slide', {direction:'left'});
    $('#gallery2').hide('slide', {direction:'right'});
    //need code to disable showgal1 and enable showgal2
  });
  $('#showgal2').click(function() {  
    $('#gallery2').delay(490).show('slide', {direction:'right'});
    $('#gallery1').hide('slide', {direction:'left'});
    //need code to disable showgal2 and enable showgal1
  });
});

「Gallery1」と「Gallery2」はフラッシュイメージギャラリーがあり、「Showgal1」と「Showgal2」はアンカーのIDです...

ように見えます

<a href="#" id="showgal1">gallery 1</a>

一方がクリックされて他のものを再度に再び可能にしたときに、.click関数を無効にする方法を見つけることができません...

デフォルトで「showgal1」を無効にしたいので、「showgal2」イベントが行われると、属性が削除され、「showgal2」が「showgal1」がクリックされるまで無効になります...

.attr('disabled','disabled') まだ機能していません...

役に立ちましたか？

解決

したがって、a showgal 関連するギャラリーがすでに表示されている場合、クリックされますか？

$('#showgal1').click(function(){
    if($('#gallery1').is(":visible"))
       return false;

    $('#gallery1').delay(490).show('slide', {direction:'right'});
    $('#gallery2').hide('slide', {direction:'left'});

});

$('#showgal2').click(function(){
    if($('#gallery2').is(":visible"))
       return false;
    $('#gallery2').delay(490).show('slide', {direction:'right'});
    $('#gallery1').hide('slide', {direction:'left'});

});

それぞれの最初の2行 click それぞれのギャラリーがすでに表示されている場合、関数は関数を停止します。

他のヒント

これを試して：

.attr('onclick','void(0)');

コードに変数を追跡しているだけで、それによって見えるようにすることもできます。 div 名前。これにより、さらにパネルが必要な場合は、将来的に拡張しやすくなります。変数に現在表示されている名前を保存し、クリックされたアイテムがあることを確認してください いいえ 何かをする前に。

あなたの質問を完全に理解しているかどうかはわかりませんが、ギャラリーが既に表示されている場合、リンクがクリックハンドラーのトリガーを妨げないようにしたいと思います。

jQueryのデータ関数を使用して、ギャラリーのアクティブ状態をtrue/falseとして保存します。

$('#showgal1').click(function() {
    var $gal1 = $(this), $gal2 = $('#gallery2');
    if(!$('#gallery1').data('active')){
        $gal1.delay(490).show('slide', {direction:'left'}).data('active', true);
        $gal2.hide('slide', {direction:'right'}).data('active', false);
    }
});

クリックすると、クラスをリンクに「無効」することができます。これにより、リンク自体を無効にしないことも、入力やボタンなどのフォーム要素のみが無効にできるため、試したとおりに無効化された属性を設定しないことに注意してください。ただし、クリックハンドラー内でクラスがあるかどうかを確認できます。

$("#showgal1").hide();
$("#showgal2").addClass("disabled");

// shows the menu on click   
$('#showgal1').click(function() {  
   if ($(this).hasClass("disabled")) return false;

   // Note the extra .addClass or .removeClass on the end
   $('#gallery1').delay(490).show('slide', {direction:'left'}).addClass("disabled");
   $('#gallery2').hide('slide', {direction:'right'}).removeClass("disabled");
});
$('#showgal2').click(function() {  
   if ($(this).hasClass("disabled")) return false

   $('#gallery2').delay(490).show('slide', {direction:'right'}).addClass("disabled");
   $('#gallery1').hide('slide', {direction:'left'}).removeClass("disabled");
});

クラスを追加することの利点は、CSSを使用して無効ボタンの外観を与えることができることです。

.disabled {
   color: grey;
}
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top