Question

我有一个页面，它上面会有几个按钮，点击一个按钮我基本上需要它来交换div - 我将它们包裹在父div中id然后每个将被替换的div也将获得它自己的id。我得到了这个代码用于交换，但如果我们最终有30个左右的配对，那么这将是繁琐而且不是很好的代码。

那么如何清理它以便点击，活动div设置为display: none，单击的设置为display: block？

这是我现在正在使用的jQuery代码。为此，我希望显示macaroni并隐藏farfalle。

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

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

  <div class="circlerow">

     <div class="circlepasta" id="macaroniButton">
        ......
     </div>

     <div class="circlepasta" id="AnotherButton">
        ......
     </div>
  </div>
</div>

Answer 1

你可以从这开始。相应地扩大我的答案。

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

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

    });

Answer 2

您可以为要div / show的所有hide提供课程，在处理点击之前，请隐藏该课程的所有div。我们假设你给它一个课程＆＃39;

：

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

，你的javascript将是：

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

请注意，$(this)是指刚刚点击的项目。

希望它能够解决问题

jQuery Show和Hide div

2 个答案: