使用 jQuery 隐藏元素

Question

这是我的 HTML：

<div id="address"><a id="prev">Prev </a>
<span id="address" class="active">0 Elgin Street</span>
<span id="address" class="passive">1 Elgin Street</span>
<span id="address" class="passive">2 Elgin Street</span>
<span id="address" class="passive">3 Elgin Street</span>
<span id="address" class="passive">4 Elgin Street</span>
<span id="address" class="passive">5 Elgin Street</span>
<span id="address" class="passive">6 Elgin Street</span>
<span id="address" class="passive">7 Elgin Street</span>
<span id="address" class="passive">8 Elgin Street</span>
<span id="address" class="passive">9 Elgin Street</span>
<a id="next"> Next</a></div>

如您所见，我有主动和被动课程。当我单击下一步时，我想隐藏活动按钮，这是本例中的第一个，然后显示下一个。

我怎样才能用 jQuery 做到这一点？

这是获取当前元素的代码：

var current = $('.active', this);

但是，current.hide() 为什么不起作用？

Answer 1

获取电流的正确方法：

var current = $(".active");

$(current).next().attr("class", "active");
$(current).attr("class", "passive"); 

如果你想隐藏：

$(".active").hide();

编辑：

在链接的点击中添加：

$("#next").click(function(event) {
    event.stopPropagation();
    var current = $(".active");

    $(current).next().attr("class", "active");
    $(current).attr("class", "passive"); 

});

编辑：

$("#next").click(function(event) {
    event.stopPropagation();
    var current = $(".active");

    $(current).next().addClass("active");
    $(current).next().removeClass("passive");

    $(current).addClass("passive");
    $(current).removeClass("active");

});

Answer 2

所以使用 next() 来获取下一项。

$(".active").removeClass("active").next("span.passive").addClass("active").removeClass("passive")

带有切换类

$(".active").toggleClass("active passive").next("span.passive").toggleClass("active passive")

当您位于列表末尾时，它无法处理这种情况。

---

var current = $('.active', this);

不起作用，因为 this 可能是您正在单击的锚点，并且该锚点没有上下文（也称为 this）正在使用的子项。

---

下面是一个例子，展示了当你到达最后一项时如何处理：

$("#address").on("click", "a", function () {  //add click handler to the anchors
  var last = $(".active").toggleClass("active passive");  //Select current active item. It removes active, adds passive classes
  var dir = $(this).data("dir");  //stored the next/prev as a data attribute so one click handler is needed
  var sib = last[dir](".passive");  //Find the next/previous passive sibling
  if (sib.length === 0) {
  sib = last;  //if we can not find the next/previous than just pick the last selected 
  }
  sib.toggleClass("active passive");  //add active and remove passive

});

.active {
  display: block
}
.passive {
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="address"> <a id="prev" data-dir="prev">Prev </a>
  <span class="active">0 Elgin Street</span>
  <span class="passive">1 Elgin Street</span>
  <span class="passive">2 Elgin Street</span>
  <span class="passive">3 Elgin Street</span>
  <span class="passive">4 Elgin Street</span>
  <span class="passive">5 Elgin Street</span>
  <span class="passive">6 Elgin Street</span>
  <span class="passive">7 Elgin Street</span>
  <span class="passive">8 Elgin Street</span>
  <span class="passive">9 Elgin Street</span>
  <a id="next" data-dir="next"> Next</a>
</div>