javascript - 单击按钮时显示隐藏备用 div

Question

嗨，我正在尝试实现一个 js/jquery 程序，其中步骤如下当有人单击按钮 1 时，首先隐藏包装 div，然后显示 2 按钮(第二个)的包装 div。第三次和第四次类似

<div class="wrapper">
    <div class="first">
        <div class="content">content1</div>
        <button class="button">1</button>
    </div>
    <div class="second">
        <div class="content">content2</div>
        <button class="button">2</button>
    </div>
</div>

<div class="wrapper">
    <div class="first">
        <div class="content">content1</div>
        <button class="button">3</button>
    </div>
    <div class="second">
        <div class="content">content2</div>
        <button class="button">4</button>
    </div>
</div>

我已经尝试过，但知道它不起作用

<script type="text/javascript">
$('.button').on('click', function(e){
    console.log($( this));
    $( this ).closest(".wrapper .second").hide();
});
</script>

Answer 1

你可以切换一个类:

$('.button').on('click', function() {
  $(this).closest('div').add($(this).closest('.wrapper').find('.hidden')).toggleClass('hidden');
});

.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="first">
    <div class="content">content1</div>
    <button class="button">1</button>
  </div>
  <div class="second hidden">
    <div class="content">content2</div>
    <button class="button">2</button>
  </div>
</div>
<div class="wrapper">
  <div class="first">
    <div class="content">content1</div>
    <button class="button">3</button>
  </div>
  <div class="second hidden">
    <div class="content">content2</div>
    <button class="button">4</button>
  </div>
</div>

JS:

$('.button').on('click', function () {
    $(this).closest('div').add($(this).closest('.wrapper').find('.hidden')).toggleClass('hidden');
});

CSS:

.hidden {
    display: none;
}

-jsFiddle-