关闭选择元素时添加类以选择元素

Add class to select element when select element is closed

本文关键字：选择 元素 添加      更新时间：2023-09-26

当通过jQuery mousedown事件单击select元素时，我正在从select元素中删除一个类。选择菜单关闭后如何重新添加此类？

JSFiddle http://jsfiddle.net/YvCHW/4274/

$("select.desired").mousedown(function(){
    $(this).removeClass('desired');
});
select {
   margin: 30px 10px;
    border: 1px solid #111;
   background: transparent;
   border: 1px solid #ccc;
   padding: 5px 10px;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
} 
select.desired {
    font-size: 30px;
    color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<select class="desired">
    <option>Apples</option>
    <option  class="selected" selected>Pineapples</option>
    <option>Chocklate</option>
    <option>Pancakes</option>
</select>

愚蠢到可以工作：

$('.special').on('mousedown', function(){
        $(this).toggleClass('some');
    })
    .on('mouseup', function(){
        $(this).toggleClass('some');
    })
    .on('click', function(){
        $(this).toggleClass('some');
    });

失去焦点的事件处理程序会有所帮助吗？

$("select.desired").focusout(function(){
    $(this).addClass('desired');
});

它似乎适用于 JSFiddle（由于某种原因有点滞后......

您可能想尝试聚焦和模糊/更改。

$("select.desired").on("blur change focus", function (evt){
    $(this).toggleClass('desired', evt.type!=="focus");
    //if (evt.type==="change") $(this).blur();
});
select {
   margin: 30px 10px;
    border: 1px solid #111;
   background: transparent;
   border: 1px solid #ccc;
   padding: 5px 10px;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
} 
select.desired {
    font-size: 30px;
    color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<select class="desired">
    <option>Apples</option>
    <option  class="selected" selected>Pineapples</option>
    <option>Chocklate</option>
    <option>Pancakes</option>
</select>

jsFiddle Demo

选择元素有很多事情要做。使用 click 时，它不会在选项上注册，无法将 click 事件附加到选项，并且如果将鼠标向上处理程序放在选择上，但鼠标向下处理程序将选择更改为太小，则鼠标向上永远不会触发，因为元素会更改位置。

不仅如此，选择元素的状态可以根据其焦点、选择或实际更改而更改。它可以更改，也可以在选择后保持不变。所有这些注意到的条件都会导致相当复杂的事件处理。我将所有逻辑放入 jQuery 扩展格式，以便它可以像

$('select.desired').selectToggle('desired');

这是扩展本身

$.fn.selectToggle = function(className){
 var 
  skip = false,
  prev = true, 
  $select = this.change(function(){
   $select.addClass(className);       
  }).blur(function(){
  if( !skip ){
   $select.addClass(className);
   prev = true;
  }
 });
 this.wrap("<span>").mousedown(function(){
  $select.toggleClass(className);
  skip = true;
  $select.blur().focus();
  skip = false;
 }).click(function(){
  if( prev == $select.hasClass(className)){
   $select.blur().focus();
  }else{
   prev = $select.hasClass(className);
  }
 });  
};

这是一个堆栈片段演示，显示了扩展在处理此问题中的给定问题时

$.fn.selectToggle = function(className){
 var 
  skip = false,
  prev = true, 
  $select = this.change(function(){
   $select.addClass(className);       
  }).blur(function(){
  if( !skip ){
   $select.addClass(className);
   prev = true;
  }
 });
 this.wrap("<span>").mousedown(function(){
  $select.toggleClass(className);
  skip = true;
  $select.blur().focus();
  skip = false;
 }).click(function(){
  if( prev == $select.hasClass(className)){
   $select.blur().focus();
  }else{
   prev = $select.hasClass(className);
  }
 });  
};
$('select.desired').selectToggle('desired');
select {
   margin: 30px 10px;
    border: 1px solid #111;
   background: transparent;
   border: 1px solid #ccc;
   padding: 5px 10px;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
} 
select.desired {
    font-size: 30px;
    color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Click an option:<select class="desired">
    <option>Apples</option>
    <option  class="selected" selected>Pineapples</option>
    <option>Chocklate</option>
    <option>Pancakes</option>
</select>

http://jsfiddle.net/YvCHW/4276/

$("select.desired").click(function(){
    $(this).toggleClass('desired');
});
相关文章：