javascript - 使用 jQuery 迭代 div

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");

}

这个脚本工作正常，它的目的只是改变颜色。我需要另一种方法来知道选择了哪个性别......

在我的 JavaScript 页面中，我需要设置一个变量，性别是什么，我的 onclick 和 id 用于传递值以在单击时更改颜色。因此，无需触摸，我需要将值设置为该变量。

Answer 1

由于您使用的是 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>