如果元素hasClass，将其他类添加到其标题值

我使用光滑的旋转木马，并且一旦div活动我想打开相应的描述。我有如果元素hasClass，将其他类添加到其标题值

问题是与此代码：

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

我想要实现：一旦一个div获取类“活动”，我想利用它的标题值，并用它作为我想要显示的列表元素的id链接（将类添加到）。

Here is a FIDDLE.

来源

2017-03-16 AthScc

使用事件'afterChange'光滑滑块来检查如果当前元素有'active'类，目前你的代码只是在页面加载时运行，而不是在类更改时运行 – empiric

我是初学者，不太清楚如何使用它。另外，当我在代码本身初始化一个类时，list元素不会改变。 – AthScc

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

流畅的传送带API有这个事件，我相信你想使用afterChange事件作用于活动元素后，它已经可见。

退房文档和例子，特别是标题为油滑页上的“事件”：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... 
    } 
});

来源

2017-03-16 14:59:52 nothingisnecessary

这似乎完全停止我的旋转木马，我想不通为什么 [链接]（https://jsfiddle.net/bvrumh83/3/）FIDDLE – AthScc

感谢您试用它。我忘了在处理程序中包含'event'参数。固定代码和你的小提琴：https://jsfiddle.net/1nmuq1f4/（你的小提琴没有定义'open作为一个类，所以我把它从'li open'改为'li.open'） – nothingisnecessary

我已经找到了解决办法：

$('.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

来源

2017-03-16 22:06:23 AthScc

小心当使用'.content li'是因为它会拾取内容中的所有'LI'元素，所以如果你的内容包含列表项（或者其他人使用你的代码），那么它也会混淆它们的风格。这就是我为什么使用'.content> li'的原因，但是最好在'LI'元素上放一个'content_item'类，这样你就可以直接给它们设计样式 – nothingisnecessary

这仅仅用于演示，在真实项目中我'使用类:) – AthScc

如果元素hasClass，将其他类添加到其标题值

回答

相关问题