微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

当光滑的滑块处于活动状态且未响应调整时，不会发生 Onclick 事件

分类：编程问答

如何解决当光滑的滑块处于活动状态且未响应调整时，不会发生 Onclick 事件

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

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

当您点击“触发器”(.caseStudyTrigger) 时，内容会根据触发器的选择而改变，目前这种方式是有效的。

问题：

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

另外，我有一个 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,{
          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>

解决方法

第一：我无法重现您的点击处理程序问题 - 它也适用于您的堆栈片段。因此，我认为这是您没有在问题中发布的内容，或者您​​的原始代码中还有其他课程等。

我发现了两个问题：

  • 您在页面加载时声明了一个永远不会改变的变量 $window_width。即使在 resize 上，它也会像声明的一样。因此，当调用 $(window).width() 处理程序时，您必须再次获得 resize：
if ($(window).width() < 1400) {
  • 在您的 click 处理程序中，您只将 .activeTrigger 类应用于被点击的元素。但是 slick 会克隆元素，例如无限滚动，有时会将克隆而不是点击目标居中。因此，您应该像处理内容卡一样将类应用于具有 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,{
          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>

优化：

  • 由于您在流畅的设置 (responsive:) 中处理窗口宽度大于 1400 像素的情况，因此不需要 if 语句 if ($(window).width() < 1400)。因此，您可以在调整大小和初始调用函数 caseStudies__slick() 时省略它：
$(window).resize(function() {
  $("#caseStudies__slick").slick('resize');
});

caseStudies__slick();
  • 由于您在页面加载时只调用一次函数 caseStudies__slick()，因此不需要该函数，并且可以直接声明光滑的滑块，这使得初始函数调用变得不必要。
  • 由于容器 .caseStudyTrigger 中只有 .caseStudyCard- 和 .caseStudies- 元素，因此无需将容器类添加到选择器中。省略这个类提高了可读性。例如：
$(".caseStudyTrigger").removeClass("activeTrigger");
  • 同样为了可读性，我会将事件侦听器放在脚本的末尾。

工作示例：

$(function(){

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

  $("#caseStudies__slick").not('.slick-initialized').slick({
  
    slidesToShow: 1,responsive: [
      {
        breakpoint: 576,settings : {
          slidesToShow: 2,}
      },{
        breakpoint: 768,settings : {
          slidesToShow: 3,{
        breakpoint: 1024,settings : {
          slidesToShow: 4,{
        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>

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

苹果市值2025年有望达4万亿美元
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot