使用jQuery隐藏元素

Hide element with jQuery

本文关键字：元素 隐藏 jQuery 使用      更新时间：2023-09-26

这是我的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()为什么不起作用？

获取电流的正确方法：

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

因此使用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可能是您正在单击的锚点，并且该锚点没有上下文（也称为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>

相关文章：