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")

使用toggleClass

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

这不能做的是当你在列表的末尾时处理这种情况。

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

不起作用，因为this可能是你点击的锚点，而锚点没有上下文（也就是这个）正在使用的子节点。

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

＆＃13;

$("#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

});

＆＃13;

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

＆＃13;

<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>

＆＃13;

使用jQuery隐藏元素

2 个答案: