Question

我有4个标签作为单选按钮。当标签处于活动状态时，它将具有类active。我想在单击其中一个标签时找出哪个标签有active类。我已经尝试了hasClass()，但是在更改类之前执行了它。有人能告诉我如何解决这个问题吗？我应该为每个标签创建一个单独的方法吗？

$("#elements").click(function() {
  if ($("#eventelement").hasClass("active")) {
    console.log("event activated")

  }
  if ($("#roleelement").hasClass("active")) {
    console.log("role activated")

  }
  // [...]
})

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script>

<div class="btn-group" data-toggle="buttons" id="elements" style="width:100%; padding-bottom: 20px">
  <label class="btn btn-primary active" id="eventelement" style="width:25%">
        <input type="radio" name="type" value="event" id="elementoption1" autocomplete="off" checked> Event
    </label>
  <label class="btn btn-primary" id="roleelement" style="width:25%">
        <input type="radio" name="type" value="role" id="elementoption2" autocomplete="off"> Role
    </label>
  <label class="btn btn-primary" id="workelement" style="width:25%">
        <input type="radio" name="type" value="workingarea" id="elementoption3" autocomplete="off"> Working Area
    </label>
  <label class="btn btn-primary" id="calendarelement" style="width:25%">
        <input type="radio" name="type" value="calendar" id="elementoption4" autocomplete="off"> Calendar
    </label>
</div>

Answer 1

您不需要课程来查找活动选项。您可以使用:checked选择器。

这是工作示例。

＆＃13;

$("#elements label").click(function () {
    var currentValue = $("input[name=type]:checked").val();
    $(this).addClass("active");
    $(this).siblings().removeClass("active");
})

＆＃13;

label {
  color: blue;
}
label.active {
  color:red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group" data-toggle="buttons" id="elements" style="width:100%; padding-bottom: 20px">
    <label class="btn btn-primary" id="eventelement" style="width:25%">
        <input type="radio" name="type" value="event" id="elementoption1" autocomplete="off"> Event
    </label>
    <label class="btn btn-primary" id="roleelement" style="width:25%">
        <input type="radio" name="type" value="role" id="elementoption2" autocomplete="off"> Role
    </label>
    <label class="btn btn-primary" id="workelement" style="width:25%">
        <input type="radio" name="type" value="workingarea" id="elementoption3" autocomplete="off"> Working Area
    </label>
    <label class="btn btn-primary" id="calendarelement" style="width:25%">
        <input type="radio" name="type" value="calendar" id="elementoption4" autocomplete="off"> Calendar
    </label>
</div>

＆＃13;

Answer 2

检查previous-active-label和current-active-label

的代码

工作片段： -

$(document).ready(function(){
  $('#elements label').on('click',function(){
    var prev = $('label.active').children('input[type="radio"]').val();
    var current = $(this).children('input[type="radio"]').val();
    $('#elements label').removeClass('active');
    $(this).addClass('active');
    alert("previous active label is "+prev);
    alert("current active label is "+current);
  });
});

.active{
color:green;
font-size:20px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script>

<div class="btn-group" data-toggle="buttons" id="elements" style="width:100%; padding-bottom: 20px">
  <label class="btn btn-primary active" id="eventelement" style="width:25%">
      <input type="radio" name="type" value="event" id="elementoption1" autocomplete="off" checked> Event
  </label>
  <label class="btn btn-primary" id="roleelement" style="width:25%">
      <input type="radio" name="type" value="role" id="elementoption2" autocomplete="off"> Role
  </label>
  <label class="btn btn-primary" id="workelement" style="width:25%">
      <input type="radio" name="type" value="workingarea" id="elementoption3" autocomplete="off"> Working Area
  </label>
  <label class="btn btn-primary" id="calendarelement" style="width:25%">
      <input type="radio" name="type" value="calendar" id="elementoption4" autocomplete="off"> Calendar
  </label>
</div>

Answer 3

无意中找到了一个解决方案，将标签选择包装在setTimeout中，使其延迟到足以返回正确的标签。

＆＃13;

$("#elements").on("click", function() {
  setTimeout(function() {
    var l = $("#elements label.active");
    console.log(l.get()[0].id);
  });
})

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script>

<div class="btn-group" data-toggle="buttons" id="elements" style="width:100%; padding-bottom: 20px">
  <label class="btn btn-primary active" id="eventelement" style="width:25%">
        <input type="radio" name="type" value="event" id="elementoption1" autocomplete="off" checked> Event
    </label>
  <label class="btn btn-primary" id="roleelement" style="width:25%">
        <input type="radio" name="type" value="role" id="elementoption2" autocomplete="off"> Role
    </label>
  <label class="btn btn-primary" id="workelement" style="width:25%">
        <input type="radio" name="type" value="workingarea" id="elementoption3" autocomplete="off"> Working Area
    </label>
  <label class="btn btn-primary" id="calendarelement" style="width:25%">
        <input type="radio" name="type" value="calendar" id="elementoption4" autocomplete="off"> Calendar
    </label>
</div>

＆＃13;

Answer 4

绑定到无线电输入更改并检查选择了哪一个：

$("#elements input").on("change", function() {
    var activeLabel = $("#elements input:checked").parent();
    console.log(activeLabel.attr('id') + ' activated');
});

请注意，也可以使用键盘更改选择，因此单击是不够的。

同样在JS Fiddle。

如何找出哪个标签包含“活动”类

4 个答案: