CODEWITHSUNDEEP
thisslick.jsjquery
AthScc
AthScc

Reputation: 93

If element hasClass, add another class to its title value

I'm using slick carousel, and once a div is active I want to open the corresponding description.

Problem I'm having is with this code:

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

What I'm trying to achieve: Once a div gets class 'active', I want to take its title value, and use it as a id link to list element I want to display(add class to).

Here is a FIDDLE.

Upvotes: 0

Views: 669

Answers (2)

nothingisnecessary
nothingisnecessary

Reputation: 6253

Use event handling, not class monitoring.

The slick carousel API has events for this, I believe you want to use the afterChange event to act on the active element after it has been made visible.

Check out the docs and examples, especially the section titled "Events" on Slick page: http://kenwheeler.github.io/slick/

And I think you don't want to use title attribute for this because that is for tooltips. I recommend data-* attributes instead. And element IDs should generally start with a letter and not a number (was required in HTML4 and makes life easier when mapping IDs to JavaScript variables; though if you are using HTML5 I think this requirement is no longer in effect).

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...
    }
});

Upvotes: 2

AthScc
AthScc

Reputation: 93

I have found a solution:

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

Working fiddle

Upvotes: 0

Related Questions