首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >为jQuery中的各种CSS选择器创建单个函数更改

为jQuery中的各种CSS选择器创建单个函数更改
EN

Stack Overflow用户
提问于 2016-03-28 03:49:30
回答 2查看 64关注 0票数 0

我使用下面的函数添加CSS类(蓝色、红色、粉红色.)在DIV .container中,从select #selcolor。是否可以在具有不同ID的其他选择标记中使用相同的函数?在这种情况下,类(蓝色,红色,粉红色.)不会将变量“.container”添加到DIV div_action中,因此必须修改变量"div_action“函数。

代码语言:javascript
运行
复制
  function select_changed() {
    jQuery('select#selcolor').each(function() {
      var selected = jQuery(this).val();
      var div_action = '.container';
      if(selected == '') {
        jQuery(div_action).addClass('');
      } 
      if(selected == 'blue') {
        jQuery(div_action).addClass('blue');
      } else {
        jQuery(div_action).removeClass('blue');
      }
      if(selected == 'pink') {
        jQuery(div_action).addClass('pink');
      } else {
        jQuery(div_action).removeClass('pink');
      };
      if(selected == 'red') {
        jQuery(div_action).addClass('red');
      } else {
        jQuery(div_action).removeClass('red');
      };
    });
  }
  $('select#selcolor').change(function() {
    select_changed();
  });

<!-- This is HTML -->

  <select name="selcolor" id="selcolor" class="form-control">
    <option value=''>Select Color</option>
    <option value="blue">Blue</option>
    <option value="pink">Pink</option>
    <option value="red">Red</option>
  </select>
EN

Stack Overflow用户

发布于 2016-03-28 05:04:00

尝试使用onChange函数,这只是逻辑,您可以在内部做任何需要的事情。

函数:

代码语言:javascript
运行
复制
function select_changed(val) {
  var selectedValue=val;
  if(selectedValue=='blue'){
    alert("1"+selectedValue);
  }
  else if(selectedValue=='pink'){
    alert("2"+selectedValue);
  }
  else if(selectedValue=='red'){
    alert("3"+selectedValue);
  }
}

html:

代码语言:javascript
运行
复制
<select name="selcolor" id="selcolor" class="form-control" onchange="select_changed(this.value)">
  <option value=''>Select Color</option>
  <option value="blue">Blue</option>
  <option value="pink">Pink</option>
  <option value="red">Red</option>
</select>
票数 1
EN
查看全部 2 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/36255684

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档