Не правильно работает скрипт js/jQuery

285
07 сентября 2017, 18:09

Всем привет! Задача стоит такая - показывать и скрывать блок по нажатию на кнопку, решил это сделать через js/jquery с помощью fadeIn и fadeOut...оно работает, т.к. по умолчанию блок не отображается(display:none), а при нажатии на кнопку появляться. Суть проблемы в том, что при повторном нажатии скрипт уже перестает срабатывать правильно( блок появляться на пару секунд и закрывается). В чем может быть проблема?

сам код:

$('.btn-down-1').click(function(){
    $("#myShowBlock").fadeIn("slow");
    //$(".btn-up").css("visibility","visible");
    $(".btn-down-1").removeClass().text("Закрыть").addClass('btn-up');
    $('.btn-up').click(function(){
        $("#myShowBlock").fadeOut();
        $(".btn-up").removeClass().text("Показать больше").addClass('btn-down-1');
    });

});

Answer 1

Вы встали на скользкий путь навешивания обработчиков событий в других обработчиках событий.

"Вы погубите себя, сын мой." Александр Дюма

$(document).on("click", ".btn-down-1", function(){
  $("#myShowBlock").fadeIn("slow");
  $(this).removeClass("btn-down-1").text("Закрыть").addClass("btn-up");
});
$(document).on("click", ".btn-up", function(){
  $("#myShowBlock").fadeOut();
  $(this).removeClass("btn-up").text("Показать больше").addClass("btn-down-1");
});
Answer 2

$(document).on('click', '.btn-up, .btn-down-1', function() { 
  const $button = $(this), 
    buttonDown = $button.hasClass('btn-down-1'); 
     
  $(this).toggleClass('btn-up btn-down-1').text(buttonDown ? 'Закрыть' : 'Показать больше'); 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<button class="btn-down-1">Показать больше</button>

READ ALSO
Realtime синхронизация двух баз данных MySQL
MySQL

Realtime синхронизация двух баз данных MySQL

Подскажите, какие существуют решения для синхронизации в реальном времени двух баз данных MySQL

 467
Android и MySQL
MySQL

Android и MySQL

Умеет ли Android работать с MySQL? Если да, то скиньте где можно про это почитать, желательно с примерамиСпасибо

 331
Mysql запрос к двум таблицам
MySQL

Mysql запрос к двум таблицам

Есть две таблицы, во всех таблицах есть поле seo_urlНужно как-то объединить эти таблицы и получить значение (name, text,

 399
Как обновить JSON в mysql
MySQL

Как обновить JSON в mysql

Как обновить такое поле JSONКонкретно нужно обновить все в массиве, свойство food -> name, а в name обновить массив, в массиве свойство language ee на et

 403