Question

我有2个标志图像链接，德语和英语。当用户点击德国国旗时，我想为德语禁用onclick。如果用户点击英语，那么我想再次为德语重新启用onclick。

我正在使用它，但它不起作用：

jQuery(document).ready(function() {

$('a#German').click(function() {
   $(this).removeAttr('onclick').unbind('click');
 });

 $('a#English').click(function() {
    $('a#German').attr('onclick').bind('click');
 });

});

Answer 1

而不是切换所有那些处理程序并让自己疯狂，我会尝试这种方法：

<a href="#lang-1" class="language-choice language-choice-selected" data-lang="lang-1">Lang 1</a>
<a href="#lang-2" class="language-choice" data-lang="lang-2">Lang 2</a>
<a href="#lang-3" class="language-choice" data-lang="lang-3">Lang 3</a>

然后，在我的Javascript中，我会这样做：

var $languageChoices = $('.language-choice');

$languageChoices.on('click', function(){
  var $link = $(this);
  if( ! $link.is('.language-choice-selected')){
    var language = $link.data('lang');
    $languageChoices.removeClass('language-choice-selected');
    $link.addClass('language-choice-selected');
    switchLanguageTo(language); // I guess?
  }

});

这样，如果选择当前语言，就不会做任何事情。

Answer 2

为了简化farmjoe，您可以将click事件委托给标志按钮的第一个公共父级，并使用类来切换它们的活动状态，如下所示：

var buttons = $("#german, #english");
var parent = $("#parent");  // or whatever the common parent is

parent.on("click", "#german, #english", function() {
    buttons.toggleClass("active");
}

parent.on("click", "#german.active", german_handler );
parent.on("click", "#english.active", english_handler );

请注意，您需要使用active类启动其中一个按钮。

Answer 3

你需要知道处理程序，如下所示：

这样做的方式是，窗口被加载，然后命令jQuery(document).ready(function() {//code})调用作为其参数给出的函数。该函数在运行时将找到元素，在本例中为英语和德语按钮，并为click事件发生时提供一些协议。这就是bind("event",my_named_handler)函数的作用。参数是"event"，它描述了您正在等待的事件类型，处理程序是处理事件的函数。如果将其指定为bind("click",function(){//code})，则该函数将保持匿名且无法引用。当您致电unbind("click",my_named_handler)时，您的代码将查找已链接到您的元素的处理程序并将其删除。如果您已经使用匿名函数的方式，那么您将无法通过任何简单的方法引用。通过在变量中定义处理程序，您可以将同一个处理程序传递给bind和undbind，从而使链接和取消链接发生，因为函数确切地知道在两种情况下您引用的处理程序。

bind("event",handler)是一个将元素链接到事件监听器的函数，

var german_handler = function() {
     // do german clicky stuff

};
var english_handler = function() {
     // do english clicky stuff
};

jQuery(document).ready(function() {
    $('#German').bind("click",german_handler);
    $('#German').bind("click",function() {
        $('#German').unbind("click",german_handler);
    });
    $('#English').bind("click",english_handler);
    $('#English').bind("click",function() {
        $('#German').bind("click",german_handler);
    });
});

此外，最好使用#German代替a#German，id代码通常应该是唯一的。

使用jQuery打开/关闭点击功能

3 个答案: