1

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

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

目前我有三个用于文本颜色、背景颜色、箭头方向的选择框

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

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


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

});

到目前为止我在哪里 http://cdpn.io/nvGuH

谢谢

4

2 回答 2

2

我将向您展示 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>

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

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" );
});
于 2013-04-22T22:16:04.523 回答
0

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

$("select").on("change", function(){
    var val = this.value;
    $("#arrowlink").attr("class", val);
});
于 2013-04-22T21:45:10.537 回答