我正在尝试用按钮隐藏显示 div

Question

我没有尝试解释，而是在 jspaddle 上有部分代码。我将以至少 8 个按钮结束，并希望缩短（循环）show() 函数'任何其他代码提示将不胜感激。

[jspaddle]http://jsfiddle.net/mkp1j0Ly/

 <div class="row  transition text-left"  id="slider" > 
    <div class=" classWithPad col-3 des" id="des1">aaa</div>
<div class=" classWithPad col-3des" id="des2">bbb</div>
<div class=" classWithPad col-3 des" id="des3">ccc</div>

</div>

Answer 1

在这里您可以将所有与class属性结合起来。我们基于类创建了事件，并为当前元素选择了仅包含该特定元素的父元素。

因此我们能够对元素内部的当前元素触发任何操作。

试试下面的片段

$(function () {
    $('.close').on('click', function () {
        $(this).parent('.myCustomElm').find('.danceforme').hide();
    });
    $('.open').on('click', function () {
        $(this).parent('.myCustomElm').find('.danceforme').show();
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="myCustomElm">
    <button class="close">Stop Dancing</button>
    <button class="open">Dance for me</button>
    <div class="danceforme">I am dancing 1</div>
</div>
<div class="myCustomElm">
    <button class="close">Stop Dancing</button>
    <button class="open">Dance for me</button>
    <div class="danceforme">I am dancing 2 </div>
</div>
<div class="myCustomElm">
    <button class="close">Stop Dancing</button>
    <button class="open">Dance for me</button>
    <div class="danceforme">I am dancing 2 </div>
</div>