javascript - 在jquery中创建一个div slider

Question

当我单击正在构建的网站上的一段文本时，我试图更改图像。此时，我创建了一个名为 device 的类，其中一个类处于设备事件状态，如下所示:

  <div class="col-md-3">
        <div class="device active">
          <img src="app/assets/images/mockup.png" alt="">
        </div>
        <div class="device">
          <img src="app/assets/images/mockup.png" alt="">
        </div>
        <div class="device">
          <img src="app/assets/images/mockup.png" alt="">
        </div>

    </div>

然后我当前正在尝试做的是，当我单击一些 ID 为 #search2 的文本时，删除 active 类。这是到目前为止我的整个 jquery 脚本:

$("#search2").click(function() {
  var currentImage = $('.device.active');

  var nextImage = currentImage.next();

  currentImage.removeClass('active');

});

但是这似乎并没有删除事件类并且图像仍然显示？有任何想法吗？

Answer 1

您的选择是正确的，它对我有用(事件类已从该项目中删除)。问题一定出在代码的其他地方。

这是一个替代方案:

var activeDeviceIndex = 0;

$("#search2").click(function() {
	var devicesContainer = $('.device');
	$(devicesContainer[activeDeviceIndex]).removeClass('active');
	activeDeviceIndex === devicesContainer.length - 1 ? activeDeviceIndex = 0 : activeDeviceIndex++;
	$(devicesContainer[activeDeviceIndex]).addClass('active');
});

.device {
  display: none;
}

.device.active {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3">
      <div class="device active">
        <p>Device 1</p>
      </div>
      <div class="device">
        <p>Device 2</p>
      </div>
      <div class="device">
        <p>Device 3</p>
      </div>
  </div>
  
  <button id="search2">click</button>