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

Here's an example 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

为他们提供一个公共类，例如，用于click事件：

$('.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();
}

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

5 个答案: