.is（）無法按預期工作

Question

我是jQuery的新手，正在嘗試幻燈片演示並嘗試使其重復。 由於某些原因， if ( last.is(active) )永遠不會返回true。 在檢查器中，我可以看到最后一個孩子正在獲取活動ID。 這不是它打算使用的方式嗎？ if (active != last)也不起作用。

小提琴

JS

function changeImage() {
  var active = $('#active');
  var first = $('#slideshow:nth-child(1)');
  var last = $('#slideshow:nth-last-child(1)');
  if ( last.is(active) ) {
    var next = first;
  } else {
    var next = active.next();
  }
  next.attr('id', 'active');
  active.attr('id', 'inactive');
}

setInterval(changeImage, 1000);

標記

<div id="slideshow">
  <img id="active" src="https://i.imgur.com/8iOuvtf.jpg">
  <img src="https://i.imgur.com/Wi8mlH2.jpg">
  <img src="https://i.imgur.com/MNhgqco.jpg">
</div>

CSS

#slideshow img {display: none;} 
#slideshow #active {
    display: block;
    width: 100%;
    height: auto;
}

Answer 1

我把這個小提琴放在一起給你。 https://jsfiddle.net/76xg0d7L/

在這種情況下，使用類比使用ID容易得多。 我已經修改了您的changeImage（）函數。

function changeImage() {
    var $next = $('.slide.active').removeClass('active').next('.slide');

    if ($next.length) {
        $next.addClass('active');
    }
    else {
        $('.slide:first').addClass('active');
    } 
}

setInterval(changeImage, 1000);

我還更新了CSS以選擇活動類，而不是ID。

#slideshow img {display: none;} 
#slideshow .active {
    display: block;
    width: 100%;
    height: auto;
}

讓我知道您是否有任何疑問或是否適合您。

Answer 2

https://jsfiddle.net/gm9twq6j/

您應該使用.addClass ， .removeClass和.hasClass傳遞一個稱為“活動”的類，而不要嘗試換出ID。

JS：

function changeImage() {
    var active = $('#slideshow').find('.active');
    var first = $('#slideshow img:first-child');
    var last = $('#slideshow img:last-child');
    if ( last.hasClass('active') ) {
        var next = first;
    } else {
        var next = active.next();
    }
    active.removeClass('active');
    next.addClass('active');
}

setInterval(changeImage, 1000);

CSS：

#slideshow img {display: none;} 
#slideshow .active {
    display: block;
    width: 100%;
    height: auto;
}

HTML：

<div id="slideshow">
  <img class="active" src="https://i.imgur.com/8iOuvtf.jpg">
  <img src="https://i.imgur.com/Wi8mlH2.jpg">
  <img src="https://i.imgur.com/MNhgqco.jpg">
</div>

Answer 3

你應該更像

function changeImage() {
  var active = $("[state='active']");
  var next = active.is(":last") ? $("#slideshow:first-child") : active.next();
  active.data("state", "inactive"); //don't multiply same id attribute
  next.data("state", "active");
}

setInterval(changeImage, 1000);