jquery删除选择名称具有值的类

Question

我正在尝试组建一个小型界面构建器，根据选择字段值，添加或删除特定类。

我想编写jquery，以便它可以引用任何选择字段，只需从该选择框中删除/添加类，而无需在jquery中删除选择ID

目前我有三个用于textcolour，backgroundcolour，arrowdirection的选择框

到目前为止，这是我的剧本

$('select').change(function()
{
    var thisname = $(this).attr('name'),
        thisselect = $(this).val();


    $('#arrowlink').removeClass(thisname).val();
    $("#arrowlink").addClass(thisselect).val();

});

这是我到目前为止的地方 http://cdpn.io/nvGuH

由于

Answer 1

我会告诉你2个解决方案：

• 使用现有CSS的逻辑
• 一个没有CSS（！是的，没有！）

假设您有select 名称和options 值，例如：

  <select name="bg">
    <option value="">Background</option>
    <option value="red">red</option>
    <option value="green">green</option>
    <option value="blue">blue</option>    
  </select>

  <select name="color">
    <option value="">Color</option>
    <option value="red">red</option>
    <option value="green">green</option>
    <option value="blue">blue</option>    
  </select>

我们将检索选择名称和值（如果有的话）并将它们组合在一个数组中（如选择后的示例）：

["bg-red", "color-blue"]

现在将该数组设置为类，这意味着您必须在CSS中准备所有这些类：

.bg-red{  
  background:red; 
}
.bg-blue{  
  background:blue; 
}
.bg-green{  
  background:green; 
}

.color-red{  
  color:red; 
}
.color-blue{  
  color:blue; 
}
.color-green{  
  color:green; 
}

我们可以使用.attr('class', classesArr.join(' '))来重建所有元素的所需类。

的 LIVE DEMO

function createClasses( element ){

  var classesArr = []; // array to store all the classes

  $('select').each(function(){
     var myVal  = this.value;  // get the value // blue, red, green
     if(myVal.length)          // it there's a value join the value with the select name, ex: bg-blue, bg-red .... or color-blue, color-red ....
        classesArr.push( this.name +'-'+ this.value );
  });

  console.log(classesArr);  // open console to see what happens!
  $(element).attr('class', classesArr.join(' ') ); // rebuild all the new classes

}



$("select").on("change", function(){
    createClasses( "#arrowlink" );    // run function and pass as argument the desired element to play with
});

---

编辑：最简单的解决方案！

由于我不知道你为什么要打扰所有这些课程，我建议你通过使用这个简单的技巧来消除创造所有这些课程的麻烦：

的 LIVE DEMO

CSS：

没有CSS !!!!!

HTML：

  <div id="arrowlink">ARROW LINK</div>

  Please set:

  <select name="background-color">
    <option value="">Background</option>
    <option value="red">red</option>
    <option value="green">green</option>
    <option value="blue">blue</option>    
  </select>

  <select name="color">
    <option value="">Font Color</option>
    <option value="red">red</option>
    <option value="green">green</option>
    <option value="blue">blue</option>    
  </select>

  <select name="font-size">
    <option value="">Size</option>
    <option value="9">9</option>
    <option value="12">12</option>
    <option value="18">18</option>
    <option value="24">24</option>  
  </select>

为jQuery的.css()方法exaple创建一个对象：

function createClasses( element ){
  var classesArr = {};
  $('select').each(function(){
     var myVal  = this.value ;
     if(myVal.length) classesArr[this.name] = this.value;
  });
  console.log(classesArr);  
  $(element).css(classesArr);
}

$("select").on("change", function(){
    createClasses( "#arrowlink" );
});

Answer 2

如果您只想将类设置为等于选择的值，请尝试以下操作：

$("select").on("change", function(){
    var val = this.value;
    $("#arrowlink").attr("class", val);
});