JavaScript removeClass 不适用于 bootstrap-select

Question

我有两个 bootstrap-select 表单，它们使用相同的 JS。它是两个颜色名称列表，样式设置为以 CSS 类描述的颜色显示。

我已经将 CSS 类名也存储在每个选项元素的值中，以便 JS 可以访问它，因此它可以在单击前后保持正确的颜色。

我试图通过使用“addClass”和“removeClass”添加和删除类来更改颜色，但 removeClass 不起作用。这意味着您可以在各种选项中向下单击，显示的选项将以正确的颜色显示，但是当您返回并选择之前单击的选项时，它不会返回到该颜色。

谁能解释一下这个问题？

作为 JSFiddle

HTML

<div class="selectContainer">

  <select class="form-control pickerSelectClass" id="select_1">
    <option class="big _21" value="_21">■ Bright Red</option>
    <option class="big _106" value="_106">■ Bright Orange</option>
    <option class="big _24" value="_24">■ Bright Yellow</option>
  </select>

  <select class="form-control pickerSelectClass" id="select_2">
    <option class="big _21" value="_21">■ Bright Red</option>
    <option class="big _106" value="_106">■ Bright Orange</option>
    <option class="big _24" value="_24">■ Bright Yellow</option>
  </select>

</div>

CSS

.selectContainer {width:200px}

.big {
  font-size: 16px;
  font-weight: bold !important;
  text-shadow: -1px -1px 0 #444, 1px -1px 0 #444, -1px 1px 0 #444, 1px 1px 0 #444;
  }

._21 {
  color: red !important
  }

._106 {
  color: orange !important
  }

._24 {
  color: yellow !important
  }

JS

$(document).ready(function() {  
      $(".pickerSelectClass").selectpicker();   

      $('select').each(function(index, item){
            $(this).parent().find('.filter-option').addClass("big");
            $(this).parent().find('.filter-option').addClass($(this).val());


      }).on('change', function(){
            $(this).parent().find('.filter-option').removeClass('_*')
            $(this).parent().find('.filter-option').addClass($(this).val());
      });
});

外部资源

jquery.min.js,
bootstrap.css,
bootstrap.min.js,
bootstrap-select.css,
bootstrap-select.min.js

Answer 1

jQuery 的 removeClass也可以接受一个函数(你可以在正则表达式上即兴发挥):

(您代码中的 removeClass 正在寻找类“_*”(字符串))

相关代码:

$(this).parent().find('.filter-option').removeClass(function(index, className) {
    return (className.match(/_\d*/g) || []).join(' ');
})

这是使用它的代码片段:

$(document).ready(function() {  
      $(".pickerSelectClass").selectpicker();   

      $('select').each(function(index, item){
      			$(this).parent().find('.filter-option').addClass("big");
            $(this).parent().find('.filter-option').addClass($(this).val());
            
            
      }).on('change', function(){
            $(this).parent().find('.filter-option').removeClass(function(index, className) {
            	return (className.match(/_\d*/g) || []).join(' ');
            })
            $(this).parent().find('.filter-option').addClass($(this).val());
      });
});

.selectContainer {width:200px}

.big {
  font-size: 16px;
  font-weight: bold !important;
  text-shadow: -1px -1px 0 #444, 1px -1px 0 #444, -1px 1px 0 #444, 1px 1px 0 #444;
  }
  
._21 {
  color: red !important
  }
  
._106 {
  color: orange !important
  }

._24 {
  color: yellow !important
  }

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>

<div class="selectContainer">

  <select class="form-control pickerSelectClass" id="select_1">
    <option class="big _21" value="_21">■ Bright Red</option>
    <option class="big _106" value="_106">■ Bright Orange</option>
    <option class="big _24" value="_24">■ Bright Yellow</option>
  </select>

  <select class="form-control pickerSelectClass" id="select_2">
    <option class="big _21" value="_21">■ Bright Red</option>
    <option class="big _106" value="_106">■ Bright Orange</option>
    <option class="big _24" value="_24">■ Bright Yellow</option>
  </select>
  
</div>

希望这对您有所帮助。 :)