Как заставить мой JQuery .on ('click',) работать более одного раза? - PullRequest
Новая
       16

Как заставить мой JQuery .on ('click',) работать более одного раза?

0 голосов
/ 21 апреля 2020

Я пытаюсь создать скользящее всплывающее окно, где вы можете щелкнуть ярлык, чтобы скользить и показать содержимое, а затем снова щелкнуть тот же ярлык, чтобы скрыть содержимое. Я использую JQuery для анимации класса div, но анимация срабатывает только один раз. Я проверил, и обе функции работают, но как только он сработает в одну сторону, он не сработает снова. Вот JavaScript, функции вложены в оператор if: 

$(document).ready(function(){
    var listSlide = $(".tutor-list").css("top");
    (listSlide === "0px")? $(document).on('click', '#list-slide', function(){
            $(".tutor-list").animate({top: "200px"});
        }) : $(document).on('click', '#list-slide', function(){
            $(".tutor-list").animate({top: "0px"});
        }); 
});

Я очень плохо знаком с Javascript, поэтому возможно, что проблема заключается в синтаксической ошибке или некотором фундаментальном недостатке , но я не могу найти, что с ним не так.

Ответы [ 2 ]

0 голосов
/ 21 апреля 2020

Вы связываете событие клика только один раз и только тогда, когда документ готов. Поэтому один из разделов if/else не является обязательным. Вы можете переместить блоки if/else в привязку click следующим образом: 

$(document).ready(function() {
    $(document).on('click', '#list-slide', function() {

        var listSlide = $(".tutor-list").css("top");

        if (listSlide === "0px") {
            $(".tutor-list").animate({top: "200px"});
        } else {
            $(".tutor-list").animate({ top: "0px"});
        }

    });

});
0 голосов
/ 21 апреля 2020

Проблема с вашим кодом в том, что вы проверяете начальное состояние верхнего свойства. Затем вы привязываете щелчок в зависимости от свойства initial top.

Вы хотите использовать свойство current top. Это свойство изменяется, когда пользователь нажимает #last-slide. Поэтому вам нужно проверить состояние в обратном вызове клика, а затем обработать в зависимости от этого значения. 

$(document).ready(function(){
    $(document).on('click', '#list-slide', function(){
        var top = parseFloat($(".tutor-list").css("top"));

        if(top == 0){
            $(".tutor-list").animate({top: "200px"});
        }
        else{
            $(".tutor-list").animate({top: "0px"});
        }
    }); 
}); 
.wrapper{
  overflow: hidden;
  height: 200px;
  border: 1px dotted #000;
  position: relative;
}

.tutor-list{
  background: #ccccff;
  border: 1px dashed #000;
  position: absolute;
  top: 200px;
  min-height: 50px;
  padding: 10px;
}
<html>
  <body>
    <button id="list-slide">Toggle list</button>
    <div class="wrapper">
        <div class="tutor-list">This is the list</div>
      </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </body>
</html>

Обратите внимание, что parseFloat() на самом деле не нужен. Я просто не знаю, является ли возвращаемое значение jQuery.css("top") строкой или числом. В j-Query docs Я не смог найти тип возврата jQuery.css() * функция. Он говорит, что использует «вычисленный стиль» в зависимости от браузера. О вычисленном стиле документы говорят:

[C] вычисленные стили измерений почти всегда являются пикселями, но их можно указать как em, ex, px или% в таблице стилей. Различные браузеры могут возвращать CSS значений цвета, которые логически, но не текстуально равны, например, #FFF, #ffffff и rgb (255,255,255).

Так что я предполагаю, что могут быть разные возвращаемые значения для свойства top тоже. Поэтому для go полностью кросс-браузерной работы я всегда использую функцию parseFloat(). Кроме того, блок здесь не важен. Неважно, если это 0px, 0em или просто 0. (Обратите внимание, что для других случаев значение имеет значение . 1px не равно 1em. Для этого случая используйте jQuery.offser().top, который всегда возвращает px. *

Я не знаю ваших точных настроек, но вы также можете проверить jQuery.hide(). Эта функция скрывает ваш список. jQuery.hide() может принимать аргументы для анимации, так что вы получите тот же результат. Лично я предпочитаю функцию jQuery.hide(), потому что она меняет свойство css display. Таким образом, элемент не заканчивается где-то в пространстве, но определяется как невидимый. Я думаю, что это лучшее решение.

Также вы можете изменить функцию привязки кликов следующим образом: 

$(document).ready(function(){
    $('#last-slide').on('click', function(){
        // ...
    });
});

Лично я предпочитаю этот способ, потому что он мне приятнее. Обратите внимание, что первый метод (используемый вами) привязывает событие к документу, а затем фильтрует, это означает, что перезагрузка содержимого с помощью js / ajax сохранит функциональность . Это может быть предназначено, но также может и не предназначаться (возможно, вы снова инициализируете страницу).

...