当光滑的滑块处于活动状态并且没有响应地适应时，不会发生 Onclick 事件

Question

我有一个选项卡式模块，其中“触发器”根据宽度变成 slick slider。

如果宽度小于 576px，slick 处于活动状态，最初显示 2 张幻灯片。
如果宽度大于 576px 且小于 768px，slick 处于活动状态，最初显示 3 张幻灯片。
如果宽度大于 768px 且小于 1024px，slick 处于活动状态，最初显示 4 张幻灯片。
如果宽度大于 1400px，slick 无效。

当您单击“触发器”(.caseStudyTrigger) 时，内容会根据触发器的选择而变化，目前这种方法可行。

问题：

问题是，只要 slick 处于活动状态，.caseStudyTrigger 上的 onclick 事件就不起作用。我已经在 click function 中尝试了 console.log("test");，甚至没有出现。

另外，我还有一个resize的功能，让slick可以根据设备宽度适配2,3 4张幻灯片。但是，在调整大小时，我总是必须在该宽度上刷新页面，以便平滑显示正确数量的幻灯片？

演示：

$(function() {


  $(".caseStudies .caseStudyTrigger:first-child").addClass("activeTrigger");
  $(".caseStudies .caseStudyCard:first-child").addClass("activeCard");

  $('.caseStudies .caseStudyTrigger').click(function() {
    var id = $(this).attr('data-trigger');

    $(".caseStudies .caseStudyTrigger").removeClass("activeTrigger");
    $(this).addClass("activeTrigger");

    $(".caseStudies .caseStudyCard").removeClass("activeCard");
    $(".caseStudies .caseStudyCard[data-item='" + id + "']").addClass("activeCard");
  });


  function caseStudies__slick() {
    $("#caseStudies__slick").slick({
      slidesToShow: 1,
      slidesToScroll: 1,
      arrows: false,
      dots: false,
      mobileFirst: true,
      infinite: true,
      centerMode: true,
      focusOnSelect: true,
      responsive: [{
          breakpoint: 576,
          settings: {
            slidesToShow: 2,
            slidesToScroll: 2,
          }
        },
        {
          breakpoint: 768,
          settings: {
            slidesToShow: 3,
            slidesToScroll: 3,
          }
        },
        {
          breakpoint: 1024,
          settings: {
            slidesToShow: 4,
            slidesToScroll: 2,
          }
        },
        {
          breakpoint: 1400,
          settings: 'unslick'
        }
      ]
    });
  }

  var $window_width = $(window).width();

  if ($window_width < 1400) {
    caseStudies__slick();
  }

  $(window).resize(function() {
    if ($window_width < 1400) {
      $("#caseStudies__slick").slick("resize");
    }
  });


});

.caseStudies .slick-list {
  padding: 0px 20% !important;
}

@media (min-width: 576px) {
  .caseStudies .slick-list {
    paddding: 0 !important;
  }
}

@media (min-width: 1200px) {
  .caseStudies__triggers {
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }
}

.caseStudies__triggers .caseStudyTrigger {
  max-width: 305px;
  text-align: center;
  cursor: pointer;
  padding: 68px 25px 80px 25px;
}

@media (min-width: 992px) {
  .caseStudies__triggers .caseStudyTrigger {
    padding: 100px 25px 80px 25px;
  }
}

@media (min-width: 1200px) {
  .caseStudies__triggers .caseStudyTrigger {
    padding: 125px 75px;
  }
}

.caseStudies__triggers .caseStudyTrigger.activeTrigger {
  background-color: yellow;
}

@media (min-width: 1200px) {
  .caseStudies__body {
    padding-bottom: 125px;
  }
}

.caseStudies .caseStudyCard {
  justify-content: center;
  align-items: center;
  flex-direction: column;
  display: none;
}

@media (min-width: 1200px) {
  .caseStudies .caseStudyCard {
    flex-direction: row;
  }
}

.caseStudies .caseStudyCard.activeCard {
  display: flex;
  animation: fadeIn 0.5s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" />

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" />

<div class="caseStudies">

  <!-- TRIGGERS -->
  <div class="container-fluid">
    <div class="row">
      <div class="col-12 px-0 px-md-auto">
        <div class="caseStudies__triggers" id="caseStudies__slick">

          <div class="caseStudyTrigger" data-trigger="1">
            Trigger 1
          </div>

          <div class="caseStudyTrigger" data-trigger="2">
            Trigger 2
          </div>

          <div class="caseStudyTrigger" data-trigger="3">
            Trigger 3
          </div>

          <div class="caseStudyTrigger" data-trigger="4">
            Trigger 4
          </div>

          <div class="caseStudyTrigger" data-trigger="5">
            Trigger 5
          </div>

          <div class="caseStudyTrigger" data-trigger="6">
            Trigger 6
          </div>

        </div>
      </div>
    </div>
  </div>


  <!-- CONTENT BASED ON TRIGGER SELECTED -->
  <div class="container">
    <div class="row">
      <div class="col-12 px-0 px-md-auto">
        <div class="caseStudies__body">

          <div class="caseStudyCard" data-item="1">
            Content for trigger 1
          </div>

          <div class="caseStudyCard" data-item="2">
            Content for trigger 2
          </div>

          <div class="caseStudyCard" data-item="3">
            Content for trigger 3
          </div>

          <div class="caseStudyCard" data-item="4">
            Content for trigger 4
          </div>

          <div class="caseStudyCard" data-item="5">
            Content for trigger 5
          </div>

          <div class="caseStudyCard" data-item="6">
            Content for trigger 6
          </div>

        </div>
      </div>
    </div>
  </div>


</div>

Answer 1

首先： 我无法重现您的点击处理程序问题 - 它也适用于您的堆栈代码段。因此，我认为这是您在问题中没有 post 的东西，或者您的原始代码中还有其他 class 等等。

我发现了两个问题：

您在页面加载时声明了一个变量 $window_width，它永远不会改变。即使在 resize 上，它仍将保持声明状态。因此，当调用 resize 处理程序时，您必须再次获取 $(window).width()：

if ($(window).width() < 1400) {

在您的 click 处理程序中，您仅将 class .activeTrigger 应用于单击的元素。但是 slick 会克隆元素，例如无限滚动，有时会将克隆而不是点击目标居中。因此，您应该将 class 应用于所有具有 id 值的元素，就像您对内容卡所做的那样：

$(".caseStudies .caseStudyTrigger[data-trigger='" + id + "']").addClass("activeTrigger");

工作示例：

$(function() {


  $(".caseStudies .caseStudyTrigger:first-child").addClass("activeTrigger");
  $(".caseStudies .caseStudyCard:first-child").addClass("activeCard");

  $('.caseStudies .caseStudyTrigger').click(function() {
    var id = $(this).attr('data-trigger');

    $(".caseStudies .caseStudyTrigger").removeClass("activeTrigger");
    $(".caseStudies .caseStudyTrigger[data-trigger='" + id + "']").addClass("activeTrigger");

    $(".caseStudies .caseStudyCard").removeClass("activeCard");
    $(".caseStudies .caseStudyCard[data-item='" + id + "']").addClass("activeCard");
  });


  function caseStudies__slick() {
    $("#caseStudies__slick").not('.slick-initialized').slick({
      slidesToShow: 1,
      slidesToScroll: 1,
      arrows: false,
      dots: false,
      mobileFirst: true,
      infinite: true,
      centerMode: true,
      focusOnSelect: true,
      responsive: [{
          breakpoint: 576,
          settings: {
            slidesToShow: 2,
            slidesToScroll: 2,
          }
        },
        {
          breakpoint: 768,
          settings: {
            slidesToShow: 3,
            slidesToScroll: 3,
          }
        },
        {
          breakpoint: 1024,
          settings: {
            slidesToShow: 4,
            slidesToScroll: 2,
          }
        },
        {
          breakpoint: 1400,
          settings: 'unslick'
        }
      ]
    });
  }

  var $window_width = $(window).width();

  if ($window_width < 1400) {
    caseStudies__slick();
  }

  $(window).resize(function() {
    if ($(window).width() < 1400) {
      $("#caseStudies__slick").slick("resize");
    }
  });


});

.caseStudies .slick-list {
  padding: 0px 20% !important;
}

@media (min-width: 576px) {
  .caseStudies .slick-list {
    paddding: 0 !important;
  }
}

@media (min-width: 1200px) {
  .caseStudies__triggers {
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }
}

.caseStudies__triggers .caseStudyTrigger {
  max-width: 305px;
  text-align: center;
  cursor: pointer;
  padding: 68px 25px 80px 25px;
}

@media (min-width: 992px) {
  .caseStudies__triggers .caseStudyTrigger {
    padding: 100px 25px 80px 25px;
  }
}

@media (min-width: 1200px) {
  .caseStudies__triggers .caseStudyTrigger {
    padding: 125px 75px;
  }
}

.caseStudies__triggers .caseStudyTrigger.activeTrigger {
  background-color: yellow;
}

@media (min-width: 1200px) {
  .caseStudies__body {
    padding-bottom: 125px;
  }
}

.caseStudies .caseStudyCard {
  justify-content: center;
  align-items: center;
  flex-direction: column;
  display: none;
}

@media (min-width: 1200px) {
  .caseStudies .caseStudyCard {
    flex-direction: row;
  }
}

.caseStudies .caseStudyCard.activeCard {
  display: flex;
  animation: fadeIn 0.5s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" />

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" />

<div class="caseStudies">

  <!-- TRIGGERS -->
  <div class="container-fluid">
    <div class="row">
      <div class="col-12 px-0 px-md-auto">
        <div class="caseStudies__triggers" id="caseStudies__slick">

          <div class="caseStudyTrigger" data-trigger="1">
            Trigger 1
          </div>

          <div class="caseStudyTrigger" data-trigger="2">
            Trigger 2
          </div>

          <div class="caseStudyTrigger" data-trigger="3">
            Trigger 3
          </div>

          <div class="caseStudyTrigger" data-trigger="4">
            Trigger 4
          </div>

          <div class="caseStudyTrigger" data-trigger="5">
            Trigger 5
          </div>

          <div class="caseStudyTrigger" data-trigger="6">
            Trigger 6
          </div>

        </div>
      </div>
    </div>
  </div>


  <!-- CONTENT BASED ON TRIGGER SELECTED -->
  <div class="container">
    <div class="row">
      <div class="col-12 px-0 px-md-auto">
        <div class="caseStudies__body">

          <div class="caseStudyCard" data-item="1">
            Content for trigger 1
          </div>

          <div class="caseStudyCard" data-item="2">
            Content for trigger 2
          </div>

          <div class="caseStudyCard" data-item="3">
            Content for trigger 3
          </div>

          <div class="caseStudyCard" data-item="4">
            Content for trigger 4
          </div>

          <div class="caseStudyCard" data-item="5">
            Content for trigger 5
          </div>

          <div class="caseStudyCard" data-item="6">
            Content for trigger 6
          </div>

        </div>
      </div>
    </div>
  </div>


</div>

优化：

由于您在 slick 设置 (responsive:) 中处理了 window 宽度大于 1400px 的情况，因此不需要 if 语句 if ($(window).width() < 1400)。因此，您可以在调整大小和初始调用函数 caseStudies__slick():

$(window).resize(function() {
  $("#caseStudies__slick").slick('resize');
});

caseStudies__slick();

由于您只在页面加载时调用函数 caseStudies__slick() 一次，因此不需要该函数，并且可以直接声明光滑的滑块，这使得初始函数调用变得不必要。
由于容器 .caseStudies 中只有 .caseStudyTrigger- 和 .caseStudyCard- 元素，因此无需将容器 class 添加到选择器。省略这个 class 提高了可读性。例如：

$(".caseStudyTrigger").removeClass("activeTrigger");

另外为了可读性，我会将事件侦听器放在脚本的末尾。

工作示例：

$(function(){

  
  $(".caseStudyTrigger:first-child").addClass("activeTrigger");
  $(".caseStudyCard:first-child").addClass("activeCard");

  $("#caseStudies__slick").not('.slick-initialized').slick({
  
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    dots: false,
    mobileFirst: true,
    infinite: true,
    centerMode: true,
    focusOnSelect: true,
    responsive: [
      {
        breakpoint: 576,
        settings : {
          slidesToShow: 2,
          slidesToScroll: 2,
        }
      },
      {
        breakpoint: 768,
        settings : {
          slidesToShow: 3,
          slidesToScroll: 3,
        }
      },
      {
        breakpoint: 1024,
        settings : {
          slidesToShow: 4,
          slidesToScroll: 2,
        }
      },
      {
        breakpoint: 1400,
        settings: 'unslick'
      }
    ]
    
  });

  $('.caseStudyTrigger').click(function() {
    var id = $(this).attr('data-trigger');

    $(".caseStudyTrigger").removeClass("activeTrigger");
    $(".caseStudyTrigger[data-trigger='" + id + "']").addClass("activeTrigger");

    $(".caseStudyCard").removeClass("activeCard");
    $(".caseStudyCard[data-item='"+id+"']").addClass("activeCard");
  });

  $(window).resize(function() {
    $("#caseStudies__slick").slick('resize');
  });


});

.caseStudies .slick-list {
  padding: 0px 20% !important;
}

@media (min-width: 576px) {
  .caseStudies .slick-list {
    paddding: 0 !important;
  }
}

@media (min-width: 1200px) {
  .caseStudies__triggers {
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }
}

.caseStudies__triggers .caseStudyTrigger {
  max-width: 305px;
  text-align: center;
  cursor: pointer;
  padding: 68px 25px 80px 25px;
}

@media (min-width: 992px) {
  .caseStudies__triggers .caseStudyTrigger {
    padding: 100px 25px 80px 25px;
  }
}

@media (min-width: 1200px) {
  .caseStudies__triggers .caseStudyTrigger {
    padding: 125px 75px;
  }
}

.caseStudies__triggers .caseStudyTrigger.activeTrigger {
  background-color: yellow;
}

@media (min-width: 1200px) {
  .caseStudies__body {
    padding-bottom: 125px;
  }
}

.caseStudies .caseStudyCard {
  justify-content: center;
  align-items: center;
  flex-direction: column;
  display: none;
}

@media (min-width: 1200px) {
  .caseStudies .caseStudyCard {
    flex-direction: row;
  }
}

.caseStudies .caseStudyCard.activeCard {
  display: flex;
  animation: fadeIn 0.5s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" />

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" />

<div class="caseStudies">

  <!-- TRIGGERS -->
  <div class="container-fluid">
    <div class="row">
      <div class="col-12 px-0 px-md-auto">
        <div class="caseStudies__triggers" id="caseStudies__slick">

          <div class="caseStudyTrigger" data-trigger="1">
            Trigger 1
          </div>

          <div class="caseStudyTrigger" data-trigger="2">
            Trigger 2
          </div>

          <div class="caseStudyTrigger" data-trigger="3">
            Trigger 3
          </div>

          <div class="caseStudyTrigger" data-trigger="4">
            Trigger 4
          </div>

          <div class="caseStudyTrigger" data-trigger="5">
            Trigger 5
          </div>

          <div class="caseStudyTrigger" data-trigger="6">
            Trigger 6
          </div>

        </div>
      </div>
    </div>
  </div>


  <!-- CONTENT BASED ON TRIGGER SELECTED -->
  <div class="container">
    <div class="row">
      <div class="col-12 px-0 px-md-auto">
        <div class="caseStudies__body">

          <div class="caseStudyCard" data-item="1">
            Content for trigger 1
          </div>

          <div class="caseStudyCard" data-item="2">
            Content for trigger 2
          </div>

          <div class="caseStudyCard" data-item="3">
            Content for trigger 3
          </div>

          <div class="caseStudyCard" data-item="4">
            Content for trigger 4
          </div>

          <div class="caseStudyCard" data-item="5">
            Content for trigger 5
          </div>

          <div class="caseStudyCard" data-item="6">
            Content for trigger 6
          </div>

        </div>
      </div>
    </div>
  </div>


</div>

当光滑的滑块处于活动状态并且没有响应地适应时，不会发生 Onclick 事件

Onclick event not happening when slick slider is active and not adapting responsively

javascript

jquery

slick.js

我发现了两个问题：

优化：