javascript 查找点击了哪个 label.btn

Question

我对 javascript 有点陌生，我查看了 w3 上有关 javascript 的类(class)，但到目前为止我还没有得到答案。

我有一个问题和 4 个选项，我想更改单击的 label.btn 的颜色。

JavaScript:

$(function(){

    $("label.btn").on('click',function () {
        var choice = $(this).find('input:radio').val();

        $( "#answer" ).html(  $(this).checking(choice) );

        ClickedLabel.style.backgroundColor = "black"; // I want to change te color here
    });

///
};

html:

<div class="modal-body">
<div class="quiz" id="quiz" data-toggle="buttons">
<label id="first" class="element-animation1 btn btn-lg btn-primary btn-block"><span class="btn-label"><i class="glyphicon glyphicon-chevron-right"></i></span> <input type="radio" name="q_answer" value="1">1 One</label>
<label id="second" class="element-animation2 btn btn-lg btn-primary btn-block"><span class="btn-label"><i class="glyphicon glyphicon-chevron-right"></i></span> <input type="radio" name="q_answer" value="2">2 Two</label>
<label id="third" class="element-animation3 btn btn-lg btn-primary btn-block"><span class="btn-label"><i class="glyphicon glyphicon-chevron-right"></i></span> <input type="radio" name="q_answer" value="3">3 Three</label>
<label id="fourth" class="element-animation4 btn btn-lg btn-primary btn-block"><span class="btn-label"><i class="glyphicon glyphicon-chevron-right"></i></span> <input type="radio" name="q_answer" value="4">4 Four</label>
</div>
</div>

如有任何帮助，我们将不胜感激，谢谢!

Answer 1

A)

运行我的代码并在选项之间切换。

$(function(){
    $("label.btn").on('click',function () {
        $("label.btn").css('background-color','transparent'); 
        $(this).css('background-color','red');
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


    <div class="modal-body">
      <div class="quiz" id="quiz" data-toggle="buttons">
        <label id="first" class="element-animation1 btn btn-lg btn-primary btn-block">
          <span class="btn-label"><i class="glyphicon glyphicon-chevron-right"></i></span>
          <input type="radio" name="q_answer" value="1">1 One</label>
        <label id="second" class="element-animation2 btn btn-lg btn-primary btn-block">
          <span class="btn-label"><i class="glyphicon glyphicon-chevron-right"></i></span>
          <input type="radio" name="q_answer" value="2">2 Two</label>
        <label id="third" class="element-animation3 btn btn-lg btn-primary btn-block">
          <span class="btn-label"><i class="glyphicon glyphicon-chevron-right"></i></span>
          <input type="radio" name="q_answer" value="3">3 Three</label>
        <label id="fourth" class="element-animation4 btn btn-lg btn-primary btn-block">
          <span class="btn-label"><i class="glyphicon glyphicon-chevron-right"></i></span>
          <input type="radio" name="q_answer" value="4">4 Four</label>
      </div>
    </div>

或

在此示例中，我使用 closest 方法查找单击的单选按钮的包装标签，并使用 .css('background-color','red')改变它的颜色。我还编写了 $("label.btn").css('background-color','transparent'); 将每个选项中的所有选项的颜色重置为 transparent首先点击。

$(function(){
    $("input").on('click',function () {
          $("label.btn").css('background-color','transparent'); 
          $(this).closest("label").css('background-color','red');
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="modal-body">
  <div class="quiz" id="quiz" data-toggle="buttons">
    <label id="first" class="element-animation1 btn btn-lg btn-primary btn-block">
      <span class="btn-label"><i class="glyphicon glyphicon-chevron-right"></i></span>
      <input type="radio" name="q_answer" value="1">1 One</label>
    <label id="second" class="element-animation2 btn btn-lg btn-primary btn-block">
      <span class="btn-label"><i class="glyphicon glyphicon-chevron-right"></i></span>
      <input type="radio" name="q_answer" value="2">2 Two</label>
    <label id="third" class="element-animation3 btn btn-lg btn-primary btn-block">
      <span class="btn-label"><i class="glyphicon glyphicon-chevron-right"></i></span>
      <input type="radio" name="q_answer" value="3">3 Three</label>
    <label id="fourth" class="element-animation4 btn btn-lg btn-primary btn-block">
      <span class="btn-label"><i class="glyphicon glyphicon-chevron-right"></i></span>
      <input type="radio" name="q_answer" value="4">4 Four</label>
  </div>
</div>

<小时/>

B)

另一种方法是在单击的项目上切换一个事件类。我已经根据这种方式编写了一个示例 HERE 。切换类是一个很好的方法;)