Включить/выключить функцию щелчка с помощью jQuery

Question

У меня есть ссылки на изображение с флагом, немецкий и английский. Когда пользователь нажимает на немецкий флаг, я хочу отключить 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

Вам нужно сделать обработчик известно, что-то вроде этого:

Путь это работает, окно загружается и команда 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 тегов обычно должно быть уникальными.

Answer 2

Вместо переключения всех этих обработчиков и вождение себя гайки, я хотел бы попробовать этот подход:

<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 3

Просто упростить farmerjoe немного, вы можете делегировать событие щелчка к первому общему родителю кнопок флага, и использовать класс для переключения их активного STAUS, например, так:

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.