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

Question

嗨，我正在尝试实现一个js / jquery程序，其中当有人单击按钮1时首先执行以下步骤，然后首先是wrapper div隐藏，然后显示2按钮的wrapper 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-

Answer 2

我会检查父类是什么。 如果它的first hide元素显示下一个，则其他hide元素显示prev，如下所示：

 $('.button').on('click', function(e){ if($(this).parent().attr('class')=='first'){ $(this).parent().hide(); $(this).parent().next().show(); }else{ $(this).parent().hide(); $(this).parent().prev().show(); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <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> 

Answer 3

保持HTML不变，将javascript替换为：

$('.button').on('click', function(e){
    $( this ).closest(".wrapper").find(":hidden").show();
    $( this ).closest("div").hide();
});
$('.second').hide();

见jsFiddle