Question

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）上的//以显示我的意思。

Answer 1

这是一个参考问题，但是如果你使用eval就可以做到。小心使用eval()，不要先问父母，不要使用它;）

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

colorPattern(eval(select_val));

Answer 2

您的变量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>

选择更改颜色模式不会显示

2 个答案: