クリックすると、Jqueryで複数の要素が選択されます

Question

4つのボタンがあり、それぞれの行で1つを選択する必要があります。

私は最後の二つの最初の2と1のボタンのいずれかのボタンを選択する必要があります。だから、2つのボタン。 JavaScriptを最初の2つにすることはできましたが、コードを改善して各ボタンを1つ選択できます。

は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

アクティブクラスで兄弟を探すことができます。この場合、「その他」のボタンになります。ここで

$(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/