选择改变颜色图案不会显示

select change color pattern wont show

本文关键字：显示 改变 变颜色 选择      更新时间：2023-09-26
function colorSelectCheck(){
        var select_val = $('#color_Pattern_selector').val();
    if(select_val)
    {
       colorPattern(select_val);
       //show the pattern i wanted
       //colorPattern(RedBox);
       alert(select_val);
    }
    return;
}
$(document).ready(function () {
    $("#color_Pattern_selector").change(colorSelectCheck).change();  
    });

我的意图是改变颜色模式取决于选择值，但颜色不会增加，如果我传递这些数组选择。

这是我的DEMO

删除//上的colorPattern(RedBox)来显示我的意思。

您的变量color_Pattern_box是一个字符串，其中包含您想要使用的变量的名称，而不是实际变量本身。

将颜色数组添加到对象中，并将其名称作为属性名称

var BoxColors = {
   "RedBox": ["#FFEBEE", "#E57373", "#F44336", "#B71C1C"],
   "PinkBox": ["#F48FB1", "#E91E63", "#AD1457"]
};

然后使用选择框的值作为对象属性名来选择正确的颜色数组

var colorArray = BoxColors[select_val];
colorPattern(colorArray);

演示

var BoxColors = {
  RedBox: ["#FFEBEE", "#E57373", "#F44336", "#B71C1C"],
  PinkBox: ["#F48FB1", "#E91E63", "#AD1457"]
};
function colorPattern(color_Pattern_box){
  var color_Board = $('#colorBoard');
  var color_temp = ('');
  for(var c = 0; c < color_Pattern_box.length; c++){
    color_temp += "<li class='mycolor'; id="+color_Pattern_box[c]+" style='background: "+color_Pattern_box[c]+";'></li>";
  }
  color_Board.html(color_temp);   
}
function colorSelectCheck(){
  var select_val = $('#color_Pattern_selector').val();
  if(select_val) {
    colorPattern(BoxColors[select_val]);
  }
  return;
}
$(document).ready(function () {
  $("#color_Pattern_selector").change(colorSelectCheck).change();  
});
.mycolor{
    width:50px;
    height:50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="color_Pattern_selector">
    <option value="RedBox">Red</option>
    <option value="PinkBox">Pink</option>
</select>
<ul id="colorBoard"></ul>

这是一个引用问题，但如果使用eval就可以做到。小心使用eval()，未经父母同意不要使用;)

https://jsfiddle.net/qryhth6u/2/

colorPattern(eval(select_val));
相关文章：