Jquery показать / скрыть

Question

У меня есть следующий код:

$('#hideButton').click(function() {
        $('#menu').animate({
            opacity: 0.25
            });
        $('#hideButton').val('Show');
        $('#hideButton').attr('id','showButton');
    });

    $('#showButton').click(function() {
        $('#menu').animate({
            opacity: 1
            });
        $('#showButton').val('Hide');
        $('#showButton').attr('id','hideButton');
    });

Как видите, #hideButton следует уменьшить непрозрачность div до 0,25, а затем изменить его идентификатор на showButton.Когда я нажимаю showButton, это должно увеличить непрозрачность div до 1, но по какой-то причине код не работает после нажатия измененной кнопки.

Answer 1

Я бы не изменял идентификаторы и просто ушел из значения кнопки, чтобы определить, какое действие следует предпринять:

$('#hideButton').click(function() {         
    var ele = $(this);
    if(ele.val() == "Hide"){ 
        ele.val('Show');
        $('#menu').animate({ opacity: 0.25 }); 
    }else{
        ele.val('Hide');
        $('#menu').animate({ opacity: 1 });
    }
});

Рабочий пример: http://jsfiddle.net/Rt4QY/

Answer 2

События привязываются к элементам при их загрузке.Когда они загружены, отсутствует элемент с идентификатором showbutton, так что он не привязывается ни к чему.Вместо этого вы должны поместить оператор if в функцию hide, чтобы проверить val () кнопки.Если это «скрыть», сделайте свою функцию скрытия, если это «показать», сделайте шоу.

Answer 3

Согласитесь с предыдущими ответами, что изменение идентификатора не лучший подход.Но если вы хотите, чтобы ваши обработчики кликов работали, используйте функцию live вместо click:

$('#hideButton').live('click', function() {
  // function body same as before
});
$('#showButton').live('click', function() {
  // same as before
}

Обратите внимание, что использование live также будет работать, если вы пытаетесьизмените класс элемента вместо ID.

Answer 4

Изменяя идентификаторы, вы, вероятно, извлекаете обработчик событий из-под jQuery.

Answer 5

Не меняйте идентификатор своей кнопки . Скорее работа с CSS классами.

Проблема в том, что вы устанавливаете обработчик щелчка для кнопки с идентификатором showButton, которого нет в тот момент, когда вы привязываете к нему событие щелчка. Ваша кнопка станет доступна после того, как вы нажмете hideButton, потому что она преобразует ее в showButton.

Так как это тот же элемент DOM, вы должны использовать CSS-классы и сохранять ID, как это было изначально. Я хотел бы предложить (и другие, мы надеемся, согласятся), что изменение идентификаторов, в первую очередь, является плохой практикой, и ее следует избегать.