值更改时从父下拉列表中删除类

Question

我得到了这个脚本，即将类添加到父下拉列表：others。但是，在随后更改下拉列表中的值时，activated 类不再起作用

JSFiddle Demo

HTML：

<div class="container">
  <div class="row">
    <div class="col-sm-12">
      <div id="term" class="btn-group btn-group-toggle d-flex" data-toggle="buttons">
        <label class="btn btn-primary w-100 active">
                <input type="radio" name="options" value="5" id="option1" autocomplete="off"> 5
              </label>
        <label class="btn btn-primary w-100">
                <input type="radio" name="options" value="10" id="option2" autocomplete="off"> 10
              </label>
        <label class="btn btn-primary w-100">
                <input type="radio" name="options" value="15" id="option3" autocomplete="off"> 15
              </label>
        <div class="btn-group btn-dropdown w-100">
          <label class="btn btn-primary w-100 dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <input type="radio" class="" name="options" id="option4" autocomplete="off"> <span class="selection">Other</span> <span class="caret"></span>
                </label>
          <div class="dropdown-menu dropdown-menu-right">
            <label class="btn btn-primary w-100">
                    <input type="radio" name="options" value="20" id="option3" autocomplete="off"> 20
                  </label>
            <label class="btn btn-primary w-100">
                    <input type="radio" name="options" value="25" id="option3" autocomplete="off"> 25
                  </label>
            <label class="btn btn-primary w-100">
                    <input type="radio" name="options" value="30" id="option3" autocomplete="off"> 30
                  </label>
            <label class="btn btn-primary w-100">
                    <input type="radio" name="options" value="35" id="option3" autocomplete="off"> 35
                  </label>
            <label class="btn btn-primary w-100">
                    <input type="radio" name="options" value="40" id="option3" autocomplete="off"> 40
                  </label>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

JS：

$(".dropdown-menu label").click(function(){
  var selText = $(this).text();
  $(this).parents('.btn-group').find('.selection').html(selText+' <span class="caret"></span>');
  $(this).parents('.btn-group').find('.dropdown-toggle').addClass('activated');
  $(this).parents('.btn-group').find('label').click(function(){
        $(this).parents('.btn-group').find('.dropdown-toggle').removeClass('activated');
        });
});

查看演示并尝试更改下拉列表中的值。 activated 类第一次添加到父级中，但是随着您不断更改值，它不再起作用。我该如何解决这个问题？

Answer 1

不要在另一个事件处理程序中添加点击事件处理程序：

$(this).parents('.btn-group').find('label').click(function(){

通过这种方式，您创建的点击处理程序与点击第一个元素的次数一样多。

这一行还有另一个问题：

$(".dropdown-menu label").click(function(){

将该行更改为：

$('#term label').on('click', function(e) {

现在您可以收听每个标签，因此您可以做必要的事情：

$('#term label').on('click', function(e) {
    if ($(this).closest('.btn-group').is('.btn-dropdown')) {
        var selText = $(this).text();
        var x = $(this).closest('.btn-group').find('.selection').html(selText + ' <span class="caret"></span>');
        $(this).closest('.btn-group').find('.dropdown-toggle').addClass('activated');
    } else {
        $(this).closest('.btn-group').find('.dropdown-toggle').removeClass('activated');
    }
});

$('#term label').on('click', function(e) {
    if ($(this).closest('.btn-group').is('.btn-dropdown')) {
        var selText = $(this).text();
        var x = $(this).closest('.btn-group').find('.selection').html(selText + ' <span class="caret"></span>');
        $(this).closest('.btn-group').find('.dropdown-toggle').addClass('activated');
    } else {
        $(this).closest('.btn-group').find('.dropdown-toggle').removeClass('activated');
    }
});

.btn-group .dropdown-menu.show {
    border: 2px solid blue;
    padding: 0;
}

.btn-group .dropdown-menu .btn {
    margin: 0;
    border-radius: 0;
    border: 0;
    border-bottom: 2px solid blue;
}

.btn-group .dropdown-menu .btn input {
    position: absolute;
    clip: rect(0, 0, 0, 0);
}

.btn.btn-primary.w-100.dropdown-toggle.activated {
    background-color: #0f3b83;
    border: solid 2px #0f3b83;
    color: #fff;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>


<div class="container">
    <div class="row">
        <div class="col-sm-12">
            <div id="term" class="btn-group btn-group-toggle d-flex" data-toggle="buttons">
                <label class="btn btn-primary w-100 active">
                    <input type="radio" name="options" value="5" id="option1" autocomplete="off"> 5
                </label>
                <label class="btn btn-primary w-100">
                    <input type="radio" name="options" value="10" id="option2" autocomplete="off"> 10
                </label>
                <label class="btn btn-primary w-100">
                    <input type="radio" name="options" value="15" id="option3" autocomplete="off"> 15
                </label>

                <div class="btn-group btn-dropdown w-100">
                    <label class="btn btn-primary w-100 dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
                           aria-expanded="false">
                        <input type="radio" class="" name="options" id="option4" autocomplete="off"> <span
                            class="selection">Other</span> <span class="caret"></span>
                    </label>

                    <div class="dropdown-menu dropdown-menu-right">
                        <label class="btn btn-primary w-100">
                            <input type="radio" name="options" value="20" id="option3" autocomplete="off"> 20
                        </label>
                        <label class="btn btn-primary w-100">
                            <input type="radio" name="options" value="25" id="option3" autocomplete="off"> 25
                        </label>
                        <label class="btn btn-primary w-100">
                            <input type="radio" name="options" value="30" id="option3" autocomplete="off"> 30
                        </label>
                        <label class="btn btn-primary w-100">
                            <input type="radio" name="options" value="35" id="option3" autocomplete="off"> 35
                        </label>
                        <label class="btn btn-primary w-100">
                            <input type="radio" name="options" value="40" id="option3" autocomplete="off"> 40
                        </label>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>