Javascript jQuery显示和隐藏div

我有一个页面，上面有几个按钮，点击一个按钮，我基本上需要它来交换div-我将它们包装在一个带有

id

的父

div

中，然后每个将被替换的

div

也将得到它自己的

id

。我用这段代码来进行交换，但如果我们最终有30对左右的配对，那么这段代码将非常乏味，而且根本不是好代码

那么我该如何清理它呢？因此，一次单击，活动div设置为

display:none

，而单击的div设置为

display:block

这是我目前正在使用的jQuery代码。为此，我希望显示

macaroni

，隐藏

farfall

$('#macaroniButton').click(function(){
    $('#macaroni').toggle();
    $('#farfalle').toggle();
});

.....
.....

......
......

您可以为要显示的所有

div

指定一个类，并且在处理单击之前，使用该类隐藏所有div。假设您给它一个类“item”：

<div id="topchanger">
    <div id="farfalle" class="item">
        .....
    </div>
    <div id="macaroni" class="item">
        .....
    </div>
</div>

请注意，

$（此）

指的是刚刚单击的项目

---

希望你能从这个开始。相应地扩展我的答案

     $('#macaroniButton').click(function(){

           $("#macaroni").show().siblings('div').hide();

    });

---

根据按钮的位置，您可以使用某种类型的父/子选择器。请在问题中添加

#macaroniButton

元素的HTML。@RoryMcCrossan我只是补充了一点抱歉。如果您可以共享一个JSFIDLE来演示示例工作，那将非常有帮助。

$('div.item').click(function(){
  $('div.item').hide();
  $(this).show();
});

     $('#macaroniButton').click(function(){

           $("#macaroni").show().siblings('div').hide();

    });