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，解释它的作用。

＆＃13;

$('.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...
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

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

使用jQuery在整个div中迭代

2 个答案: