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

Check if value is not equal to position in array

本文关键字：位置 数组 不等于 value 是否 检查      更新时间：2023-09-26

我试图为一个数据标签不匹配数组当前位置的值的元素删除一个类。

数组的值为[0,2,4,6,8,10]，但这改变了，所以我不能硬编码它。如果幻灯片时间为4，当前时间为6，显示"is-active"类，但在4时删除"is-active"类。

    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>

如果一次只有一张幻灯片是活动的，您可以简单地先从所有幻灯片中删除类，然后在预期的幻灯片上设置类，如下所示:

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

您打算使用.forEach()的方式将不起作用，但是。.forEach()需要一个遍历元素的函数。此外，.forEach()不能以您期望的方式神奇地生成jQuery选择器。

如果出于某种原因，您仍然希望循环遍历其他元素，有许多方法可以做到这一点:

  1. 我如何相信你打算使用.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. 使用属性not equal选择器和jQuery的.each():

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

  3. 使用jQuery的.filter()和链接它与jQuery的.each()(相当低效):

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

等。等。

相关文章：