单击组合时多个类元素的 JQuery 切换

Question

如您所见。点击时有 3 个显示隐藏切换。

<button id="btn-hide" class="btn-toggle">Hide</button>
<button id="btn-show" class="btn-toggle">Show</button>

<button id="btn-hide" class="btn-toggle-2">Hide2</button>
<button id="btn-show" class="btn-toggle-2">Two</button>

<button id="btn-hide" class="btn-toggle-3">Hide3</button>
<button id="btn-show" class="btn-toggle-3">Three</button>

#btn-show {
    display: none;
}

我的问题，可以通过结合 jquery toggle 多类使这段代码更简单，所以如果需要创建更多的切换按钮，我们不再需要添加新的查询。谢谢。

$('.btn-toggle').on( 'click', function () {
 $('.btn-toggle').toggle();
});

$('.btn-toggle-2').on( 'click', function () {
 $('.btn-toggle-2').toggle();
});

$('.btn-toggle-3').on( 'click', function () {
 $('.btn-toggle-3').toggle();
});

Answer 1

将每对按钮包装在一个 div 中。

HTML：

    <div class="tgl">
        <button id="btn-hide" class="btn-toggle">Hide</button>
        <button id="btn-show" class="btn-toggle">Show</button>
    </div>

    <div class="tgl">
        <button id="btn-hide" class="btn-toggle">Hide2</button>
        <button id="btn-show" class="btn-toggle">Two</button>
    </div>

    <div class="tgl">
        <button id="btn-hide" class="btn-toggle">Hide3</button>
        <button id="btn-show" class="btn-toggle">Three</button>
    </div>

JS：

    $('.btn-toggle').on( 'click', function () {
      $(this).parent().find('.btn-toggle').toggle();
    });

CSS：

#btn-show {
    display: none;
}
.tgl
{
  display:inline;
}