使用jQuery在整個div中迭代使用jQuery

Question

我有一個按鈕，我需要得到一個狀態，即檢查天氣的男性或女性，下面是我的代碼。

<!-- GENDER BUTTON --> 
<div class="btn-group gender_guest" tabindex="0"> 
    <a class="btn active btn-default btn-success gender" onclick="genderClicked(this,'female${status.index}')" id="male${status.index}">Male</a> 
    <a class="btn btn-default gender" onclick="genderClicked(this,'male${status.index}')" id="female${status.index}">Female</a> 
</div> 

我的腳本

function genderClicked(clickedObj, id) { 

    $('#' + id).removeClass("active"); 
    $('#' + id).removeClass("btn-success"); 

    $(clickedObj).addClass("active"); 
    $(clickedObj).addClass("btn-success"); 

} 

該腳本正常工作，其目的是爲了只改變color.I需要另一種方法來知道選擇哪個性別...

在我的JavaScript頁面我需要在變量中設置什麼是性別，我的onclick和id用於在點擊時傳遞值以更改顏色。因此，如果沒有觸摸，我需要將該值設置爲該變量。

Answer 1

function genderClicked(clickedObj, id) { 
    .. 
    var gender = "male"; 
    if(id == "female${status.index}"){ 
    gender = "female"; 
    } 
    console.log(gender); 
} 

Answer 2

由於您使用的是jQuery，請使用類選擇器添加事件。

我評論了JS，解釋它做了什麼。

$('.gender').on('click', function(e) { 
 
    // prevent that the anchor is triggered 
 
    e.preventDefault(); 
 
    // remove the classes from a links 
 
    $('.gender_guest a').removeClass('active btn-success'); 
 
    // add the classes to the clicked one 
 
    $(this).addClass('active btn-success'); 
 

 
    // get the gender */ 
 
    var gender = $(this).attr('id'); 
 
    // returns male.... or female... 
 
});

/* only for demonstration */ 
 
.active{ border: 2px solid blue } 
 
.btn-success { color: green; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- GENDER BUTTON --> 
 
<div class="btn-group gender_guest" tabindex="0"> 
 
    <a class="btn active btn-default btn-success gender" id="male${status.index}">Male</a> 
 
    <a class="btn btn-default gender" id="female${status.index}">Female</a> 
 
</div>