Question

我正在尝试删除一个元素的类，该元素的数据标记与数组当前位置的值不匹配。

数组的值为[0,2,4,6,8,10]，但这会改变，因此我无法对其进行硬编码。如果幻灯片放映时间为4且当前时间为6则显示＆＃34; is-active＆＃34;但是要删除＆＃34; is-active＆＃34;上课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

如果一次只有一张幻灯片处于活动状态，您可以先从所有幻灯片中删除该类，然后在预期的幻灯片上设置该类，如下所示：

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

但是，您打算使用.forEach()的方式无效。 .forEach()期望一个循环遍历元素的函数。此外，.forEach()无法以您期望的方式神奇地生成jQuery选择器。

如果出于某种原因，你仍然希望循环使用其他人，那么有很多方法可以做到：

我相信您打算使用.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");
  }
} );

使用属性not equal selector和jQuery的.each()：

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

使用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' );
} );

等。等

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

1 个答案: