JavaScript removeClass 在引导选择上不起作用答案

【问题标题】：JavaScript removeClass not working on bootstrap-selectJavaScript removeClass 在引导选择上不起作用
【发布时间】：2018-01-20 05:13:06
【问题描述】：

我有两个使用相同 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
  }

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

【问题讨论】：

您应该检查您在视觉上看到的页面上的选择元素。您似乎正在尝试更改页面上的元素上的类，这些元素很可能是隐藏的，而不是引导程序所做的事情，这很可能是您问题的根源。
它确实说“选择”，但随后它会搜索“.filter-option”，实际上是在使用它而不是默认值。我可以看到，当我单击它时，我得到了我想要的行为，当我检查它时，我发现它正在使用 booststrap 类“.filter-option”，所以它不是你提到的本机隐藏元素。就像我说的，我使用相同的机制来尝试添加和删除类。添加作品，所以我不明白为什么删除不起作用。
我很困惑，好像我在某些示例中查看silviomoreto.github.io/bootstrap-select/examples，我看到的可见选择元素实际上是一个跨度。当我单击带有选项的菜单时显示的菜单是带有 lis 的无序列表。当您检查页面上的可见元素时，不是您所说的原生选择。

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

jQuery 的removeClass 也可以带一个函数（你可以在正则表达式上即兴发挥）：

（您代码中的 removeClass 正在寻找一个类“_*”（一个字符串））

相关代码：

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

这是一个使用它的代码 sn-p：

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

希望这会有所帮助。 :)

【讨论】：

非常感谢！我设法通过复制字典中的 CSS 类来解决这个问题，但这意味着我不必这样做。太棒了
很高兴我能帮上忙。

【解决方案2】：

我已经设法解决了这个问题，只需从字典中的类复制 CSS，键作为类名，值作为类中的颜色。 As a JSFiddle.

var dict = {};
dict["_21"] = "red";
dict["_106"] = "orange";
dict["_24"] = "yellow";

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

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


      }).on('change', function(){
            $(this).parent().find('.filter-option').css("color",dict[$(this).val()]);
      });
});

【讨论】：