Jquery On и Off нажатие кнопки

0

Это то, что я хотел бы выполнить. У меня есть кнопка div about us, которая открывает страницу о нас. Я хотел бы отключить кнопку div о нас, чтобы пользователи не могли на нее нажимать, если не закрыть страницу о нас с помощью кнопки закрытия. Пожалуйста, проверьте мою попытку ниже. После нажатия кнопки "закрыть" кнопку "div about us" больше не будет нажата.

Проверьте JSfiddle http://jsfiddle.net/jvaHb/

    $(document).ready(function(e) {
    $('#btn-social').click(function(){
        var this_item = $(this).attr("data-item");
        $('.content-item').hide();
        $('.fade-container-' + this_item).fadeIn(2000);
        $('#btn-social').off('click');
    });
    $('#btn-close-social').click(function(){
        var this_item = $(this).attr("data-item");
        $('.content-item').hide();
        $('.fade-container-' + this_item).fadeIn(2000);
        $('#btn-social').on('click');
    });

    $('#btn-close-about').click(function(){
        var this_item = $(this).attr("data-item");
        $('.content-item').hide();
        $('.fade-container-' + this_item).fadeIn(2000);
        $('#btn-about').on('click');
    });

    $('#btn-about').click(function(){
        var this_item = $(this).attr("data-item");
        $('.content-item').hide();
        $('.fade-container-' + this_item).fadeIn(2000);
        $('#btn-about').off('click');

    });
    });
  • 1
    пожалуйста, предоставьте jsfiddle для этого
  • 0
    я внес изменения в свой код, посмотрел, и ты тоже обновил свой код.
Показать ещё 4 комментария
Теги:

3 ответа

1
Лучший ответ

.off('click') отделяет все обработчики кликов от #btn-about и #btn-social когда кнопки нажимаются, а новый никогда не присоединяется. (В любом случае вы не хотите отсоединять их и снова присоединять).

Есть много способов решить эту проблему. Так как вы не хотите скрывать кнопку, один параметр состоит в том, чтобы просто иметь переменную, указывающую, следует ли кликать каждую кнопку...

$(document).ready(function(e) {

    var isBtnSocialClickable = true;

    $('#btn-close-social').click(function(){
        var this_item = $(this).attr("data-item");
        $('.content-item').hide();
        $('.fade-container-' + this_item).fadeIn(2000);
        isBtnSocialClickable = true;
    });

    $('#btn-social').click(function(){
        if (isBtnSocialClickable) {
            var this_item = $(this).attr("data-item");
            $('.content-item').hide();
            $('.fade-container-' + this_item).fadeIn(2000);
            isBtnSocialClickable = false;
        }
    });

    var isBtnAboutClickable = true;

    $('#btn-close-about').click(function(){
        var this_item = $(this).attr("data-item");
        $('.content-item').hide();
        $('.fade-container-' + this_item).fadeIn(2000);
        isBtnAboutClickable = true;
    });

    $('#btn-about').click(function(){
        if (isBtnAboutClickable) {
            var this_item = $(this).attr("data-item");
            $('.content-item').hide();
            $('.fade-container-' + this_item).fadeIn(2000);
            isBtnAboutClickable = false;
        }
    });
});

Другие способы сделать это - включить/отключить кнопки или добавить и удалить класс на кнопках и включить селектор событий onclick, чтобы он не срабатывал при удалении класса.

  • 0
    Привет Энтони, я пробовал твои коды. Кнопка # btn-about все еще активна до нажатия кнопки закрытия. Мне нужна кнопка # btn-about для включения после нажатия кнопки закрытия, а не раньше. Благодарю.
  • 0
    Пожалуйста, проверьте JSfiddle jsfiddle.net/jvaHb
Показать ещё 1 комментарий
1

Вот код, который будет работать

HTML

<a href="#" class="btn_about">About Us</a>

<div id="content">About Us content
<div class="close"><a href="#">Close Button</a></div>
</div>

CSS

#content { display:none;}

Код

$('.btn_about').on('click', function(e){
    e.preventDefault();
    if( !$(this).is('.active') ){
        alert('Hi');
        $('#content').fadeIn();
        $(this).addClass('active');
    }
});

$('.close').click(function(){
    $('#content').fadeOut();
    $('.btn_about').removeClass('active');

});

Демо-версия скрипта

  • 0
    Я попробовал ваши коды. Но после нажатия кнопки «Закрыть» кнопка «О нас» не активируется.
  • 0
    Пожалуйста, предоставьте ваш код на скрипке, было бы легко найти вашу проблему
Показать ещё 3 комментария
0

Используйте preventDefault() и переменную btn в выражении if/else

$('#btn-close1').click(function(e){
    if(btn === 'off'){
        var this_item = $(this).attr("data-item");
        $('.content-item').hide();
        $('.fade-container-' + this_item).fadeIn(2000);

        btn = 'on';
    }else{
        // Stops Default Button Action
        e.preventDefault();
    }

});

$('#btn-about').click(function(){
    if(btn === 'on'){
        var this_item = $(this).attr("data-item");
        $('.content-item').hide();
        $('.fade-container-' + this_item).fadeIn(2000);

        btn = 'off';
    }else{
        // Stops Default Button Action
        e.preventDefault();
    }
});
  • 0
    Спасибо за ваш ответ. но я не хочу, чтобы моя кнопка скрывалась.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню