jquery - 如何使用 jQuery 选择或排除多个元素？

Question

我有以下内容：

<div id="div1" style="display: block;">
text
</div>

<div id="div2" style="display: none;">
text
</div>

<div id="div3" style="display: none;">
text
</div>

当某个事件发生时，我想隐藏除一个 div 之外的所有内容。因此，例如，我可能想显示 div2，同时隐藏 div1 和 div3。问题是div的数量是任意的，所以我不能简单地去：

$("#div1").css("display", "none");
$("#div2").css("display", "block");
$("#div3").css("display", "none");

因为可能有一个 div 或可能有四个。

我怎么能用 jQuery 做到这一点？

Answer 1

这是一个示例 jsFiddle。

我不确定您想要什么样的活动，或者您是否允许我们使用课程，所以我选择了change()：

jQuery：

$('select').change(function(){
   $('div').hide();
   $('div#' + this.value).show();
});

HTML：

<select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

<div id="1">1</div>
<div id="2">2</div>
<div id="3">3</div>

Answer 2

首先，让我们为您的 div 添加一个类

<div id="div1" class="someDiv" style="display: block;">
text
</div>

<div id="div2" class="someDiv" style="display: none;">
text
</div>

<div id="div3" class="someDiv" style="display: none;">
text
</div>

假设您的号码在列表中：

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>

和 jQuery

$("ul li").click(function() {
    var divNum = $(this).text();
    $(".someDiv").hide();
    $("#div" + divNum).show();
});

Answer 3

给他们一个通用的类，例如，用于点击事件：

$('.foo').click(function() {
   $('.foo').not(this).hide();
});

Answer 4

你正在研究 jQuery 选择器。你可以使用通配符，选择多个元素，第一个和最后一个等等。

$("#div1, $div2") (selects multiple divs)
$("$divX > first) (all elements with the same id, gets the first)
$("[id^=div]") (get's all elements starting with id div)

http://www.w3schools.com/jquery/jquery_ref_selectors.asp

Answer 5

您可以在您的事件功能上这样做：

function(){
    $('#div' + $(this).val()).show().siblings('div').hide();
}