Question

我正在使用光滑的旋转木马，一旦div处于活动状态，我想打开相应的描述。

我遇到的问题是这个代码：

if ($('div').hasClass('active')) {
  var title = $(this).attr('title');
  $('ul li').removeClass('open');
  $(title).addClass('open');
}

我想要实现的目标：一旦div得到类'active'，我想取其标题值，并将其用作id链接以列出我想要显示的元素（将类添加到）。

Here is a FIDDLE.

Answer 1

使用事件处理，而不是类监控。

光滑的轮播API有针对此的事件，我相信您希望在活动元素可见之后使用afterChange事件对其进行操作。

查看文档和示例，尤其是Slick页面上标题为“Events”的部分：http://kenwheeler.github.io/slick/

我认为您不希望使用title属性，因为这是针对工具提示的。我推荐使用data-*属性。元素ID通常应该以字母而不是数字开头（在HTML4中是必需的，并且在将ID映射到JavaScript变量时使生活更轻松;但如果您使用的是HTML5，我认为此要求不再有效。）

HTML

<div id="carousel">
<div data-content-id="content1">
  Selector 1 </div>
<div data-content-id="content2">
  Selector 2 </div>
<div data-content-id="content3">
  Selector 3 </div>
</div>
<ul class="content">
  <li id="content1">Content 1</li>
  <li id="content2">Content 2</li>
  <li id="content3">Content 3</li>
</ul>

的JavaScript

$('#carousel').on('afterChange', function(event, slick, currentSlide) {
    // get the associated content id
    var contentId = $(slick.$slides.get(currentSlide)).data("content-id");
    if(contentId && contentId.length)
    {
        var $content = $("#" + contentId);

        $(".content>li").removeClass("open"); // hide other content

        $content.addClass("open"); // show target content, or whatever...
    }
});

Answer 2

我找到了一个解决方案：

$('.slider').on('afterChange', function(event, slick, currentSlide, nextSlide){
       var contentId= $(slick.$slides.get(currentSlide)).data('content');
       if(contentId)
       {
            $(".content li").removeClass('open');
            $('#' + contentId).addClass('open');
       }
});

工作fiddle

如果element hasClass，则将另一个类添加到其标题值

2 个答案: