выбрать изменить цвет узор не показывать

Question

Мое намерение меняет цветовой паттерн, зависит от значения выбора, но цвет не будет добавлять, если я передаю этот массив для выбора.

вот мой DEMO

удалить // на colorPattern (Redbox), чтобы показать, что я имею в виду.

Answer 1

Ваша переменная color_Pattern_box это строка, содержащая имя varible вы хотите использовать, а не фактическая переменная сам.

Добавьте цвета массивы объекта с их именами как имена свойств

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>

Answer 2

Это проблема повторения, но если вы используете eval, вы можете это сделать. Возьмите осторожно eval(), не использовать его, не попросить своих родителей первый;)

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

colorPattern(eval(select_val));