单击时，使用Jquery选择多个元素

Question

我有4个按钮，我必须在每行中选择一个。

我必须选择前两个按钮和后两个按钮。所以，两个按钮。 我能够为前两个制作JavaScript，但现在我想改进我的代码，以便我可以选择每个按钮中的一个。

JavaScript的：

$(document).ready(function(){
    //show content by default
    $(".opt-container button:first-child").addClass("active");

    $('.opt-container button').click(function(){
      $('.opt-container button').removeClass('active');
      $(this).addClass('active');

    });
});

HTML：

<div class="row">
<div class="opt-container" style="display: flex; margin: auto; padding-bottom:15px;">
    <button class="opt1-img active" dir="rtl">
        <img class="" src="../lp.8/img/venus.png">
        <p class="col-xs-12 text-center" style="margin-top:10px; font-weight: 700;" dir="rtl">أنا امرأة</p>
    </button>
    <button class="opt2-img" dir="rtl">
        <img class="" src="../lp.8/img/mars.png">
        <p class="col-xs-12 text-center" style="margin-top:13px; font-weight: 700;" dir="rtl">أنا رجل</p>
    </button>
</div>

<div class="opt-container" style="display: flex; margin: auto;">
    <button class="opt1-img active" dir="rtl">
        <img class="" src="../lp.8/img/loupe.png">
        <p class="col-xs-12 text-center" style="margin-top:10px; font-weight: 700;" dir="rtl">وحيد</p>
    </button>
    <button class="opt2-img" dir="rtl">
        <img class="" src="../lp.8/img/wedding-rings.png">
        <p class="col-xs-12 text-center" style="margin-top:13px; font-weight: 700;" dir="rtl">متزوج</p>
    </button>
</div>

我该怎么做？ 我是javaScript的新手，欢迎所有的帮助。 ：）

Answer 1

您可以使用活动类查找兄弟姐妹。在这种情况下，它将是＆＃34;其他＆＃34;按钮。

$(document).ready(function(){
    //show content by default
    $(".opt-container button:first-child").addClass("active");

    $('.opt-container button').click(function(){
      $(this).siblings('.active').removeClass('active');
      $(this).addClass('active');
    });
});

这是一个小提琴演示：https://jsfiddle.net/zephyr_hex/45t7gpzj/