检查值是否不等于数组中的位置

Question

I am trying to remove a class for an element with a data tag that doesn't match value in the current position of the array.

The array has values of [0,2,4,6,8,10] but this changes, so I can't hardcode it. If the slideshow-time is 4 and the current time is 6 show "is-active" class but remove "is-active" class on 4.

    if(slideshow[slideshowPosition] == currentTime) {
      $('[data-slideshow-time="' + slideshow[slideshowPosition] + '"]').addClass("is-active");
      $('[data-slideshow-time="' + slideshow.forEach(!slideshow[slideshowPosition]) + '"]').removeClass("is-active");
}

    <div class="slideshow" data-slideshow-audio="audio-default">
<ul class="u-unstyled-list">
    <li data-slideshow-time="0">
        <img src="../img/1-1-slideshow-a.jpg" alt="">
    </li>
    <li data-slideshow-time="2">
        <img src="../img/1-1-slideshow-b.jpg" alt="">
    </li>
    <li data-slideshow-time="4">
        <img src="../img/1-1-slideshow-c.jpg" alt="">
    </li>
    <li data-slideshow-time="6">
        <img src="../img/1-1-slideshow-d.jpg" alt="">
    </li>
    <li data-slideshow-time="8">
        <img src="../img/1-1-slideshow-e.jpg" alt="">
    </li>
</ul>
</div>

Answer 1

If there's only ever one slide active at a time, you could simply remove the class from all slides first and afterwards set the class on the intended slide, like so:

$('[data-slideshow-time]').removeClass("is-active");
$('[data-slideshow-time="' + slideshow[slideshowPosition] + '"]').addClass("is-active");

The way you intended to use .forEach() will not work, though. .forEach() expects a function for looping over the elements. Furthermore .forEach() cannot magically generate the jQuery selectors in the way you expected.

If, for whatever reason, you still want to loop through the others, there are numerous ways to do so:

1. How I believe you intended to use .forEach() :

    // comparing slideshow values slideshow.forEach( function( value ) { if( value != slideshow[slideshowPosition] ) { $('[data-slideshow-time="' + value + '"]').removeClass("is-active"); } } ); // or, comparing the slideshow indexes slideshow.forEach( function( value, index ) { if( index != slideshowPosition ) { $('[data-slideshow-time="' + value + '"]').removeClass("is-active"); } } ); 

2. Using the attribute not equal selector and jQuery's .each() :

    $( '[data-slideshow-time!="' + slideshow[slideshowPosition] + '"]' ).each( function( item ) { // item is a DOM element $( item ).removeClass( 'is-active' ); } ); 

3. Using jQuery's .filter() and chaining it with jQuery's .each() (rather inefficient):

    $( '[data-slideshow-time]' ).filter( function( item ) { // jQuery allows you to get data-* attribute values like this return $( item ).data( 'slideshow-time' ) != slideshow[slideshowPosition]; } ) .each( function( item ) { // item is a DOM element $( item ).removeClass( 'is-active' ); } ); 

Etc. etc.