时间戳

首页 > 解决方案 > jQuery单击事件即使单击也不会触发

javascript - jQuery单击事件即使单击也不会触发

问题描述

我已经为一个图标分配了一个点击事件，如下所示：

$('#nextMatches i').click(function(){
          dropdownClickCount += 1;
          var CC = dropdownClickCount; console.log(CC)
          var Len = matches.length;
          var liNum;

          function addPrev() {
                $('#prevMatches').addClass('prev-in-play');
            }
            function addNext() {
                $('#nextMatches').addClass('next-in-play');
            }
            function subPrev() {
                $('#prevMatches').removeClass('prev-in-play');
            }
            function subNext() {
                $('#nextMatches').removeClass('next-in-play');
            }
            function scrollFull() {
                $('ul#matchesDropdown').animate({
                    scrollTop: $('ul#matchesDropdown').prop("scrollHeight")
                    }, 'fast');
            }
            function scrollToLi() {
                console.log("liNum is: "+liNum);
                $('ul#matchesDropdown').animate({
                    scrollTop: $('ul#matchesDropdown li:nth-child('+liNum+')').position().top
                    }, 'fast');
            }

        if (Len >= 7 && Len <= 12) {
            switch (CC) {
                case 0:
                    break;
                case 1:
                    addPrev();
                    subNext();
                    scrollFull();
                    break;
                }
            }
        else if (Len >= 13 && Len <= 18) {
            switch (CC) {
                case 0:
                    break;
                case 1:
                    liNum = 7;
                    addPrev();
                    scrollToLi();
                    break;
                case 2:
                    subNext();
                    scrollFull();
                    break;
                }
            }
        else if (Len >= 19 && Len <= 24) {
            switch (CC) {
                case 0:
                    break;
                case 1:
                    liNum = 7;
                    addPrev();
                    scrollToLi();
                    break;
                case 2:
                    liNum = 13;
                    scrollToLi();
                    break;
                case 3:
                    subNext();
                    scrollFull();
                    break;
                }
            }
});

并且遇到了一个小问题：在if-elsewhere 中，当为 true时Len >= 19 && Len <= 24，scrollToLi()函数并没有真正执行滚动动画。它根据调用case 2记录 的值，但不设置动画。但是，当再次单击该图标时，它会触发. 这里发生了什么，我该如何解决这个问题？liNumconsole.log("liNum is: "+liNum);case 3

标签： javascriptjqueryfunctionswitch-statementclick

解决方案

您需要在事件之外定义函数并将变量作为参数传递给scrollToLi函数，例如：

function scrollToLi( liNum ) {
  console.log("liNum is: " + liNum);

  $('ul#matchesDropdown').animate({
    scrollTop: $('ul#matchesDropdown li:nth-child(' + liNum + ')').position().top
  }, 'fast');
}

推荐阅读