for loop inside another for loop javascript (jquery)

Question

我有这个选择选项颜色：

.HTML：

<select id="selected_color" name="inkColor">
    <option disabled selected>select color:</option>
    <option id="red">Red</option>
    <option id="blue">Blue</option>
    <option id="green">Green</option>
    <option id="black">Black</option>
</select>

我想为这 4 行用于隐藏选项的 for 循环 javascript 制作一个具有值<= 0

.JS：

$('option#red').attr("hidden", true);
$('option#blue').attr("hidden", true);
$('option#green').attr("hidden", true);
$('option#black').attr("hidden", true);

我尝试为上面的代码制作for循环。

.JS：

//TO HIDE SELECT COLOR THAT DOSE NOT HAVE A VALUE
//color values
red= -1;
blue=9;
green= -4;
black=3;
//red and green must be hide because it's less than 0 
color_value = [red,blue,green,black];
for(var $x=0 ; $x < color_value.length ; $x++){   //first for loop
    color_str=['red','blue','green','black'];
    for(var $j=0 ; $j < color.length ; $j++){     //second for loop
        ids = "option#"+color[$j];
        if (color_value[$x] <= 0){
            $(ids).attr("hidden", true);
        }
    }
}

---

你可以在jsfiddle上看到它

Answer 1

你混淆了索引变量，它应该是color_value[$j]：

for(var $x=0 ; $x < color_value.length ; $x++){   //first for loop
    for(var $j=0 ; $j < color_str.length ; $j++){     //second for loop
        ids = "option#"+color_str[$j];
        if (color_value[$j] <= 0){
            $(ids).attr("hidden", true);
        }
    }
}

演示：https://jsfiddle.net/qu8ekvhk/3/

一个更简单的选项，具有替代(更方便(的数据结构：

var colors = {
    red: -1,
    blue: 9,
    green: -4,
    black: 3
};
$('#selected_color option').filter(function() {
    return colors[this.id] < 0;
}).hide();

演示：https://jsfiddle.net/qu8ekvhk/1/

此外，如评论中所述，如果您支持 IE，那么您不能只是在此浏览器中隐藏选项，您必须remove()它们或使用许多解决方法之一。

Answer 2

当你

没有定义它时，你引用的是color.length和color[$j](至少不是在你向我们展示的代码中(。你的意思是使用color_str吗？

...
for(var $x=0 ; $x < color_value.length ; $x++)   //first for loop
{  
    color_str=['red','blue','green','black'];
    for(var $j=0 ; $j < color_str.length ; $j++)     //second for loop
    {
        ids = "option#"+color_str[$j];
        if (color_value[$x] <= 0)
        {
            $(ids).attr("hidden", true);
        }
    }
 }

这段代码也没有做你试图实现的(我认为(，因为第二个循环只是检查$x的当前值，所以如果满足条件，最终会隐藏所有元素，而不仅仅是正确的选项。

最好是这样：

var red   = -1,
    blue  = 9,
    green = -4,
    black = 3;
var color_value = [red, blue, green, black];
var color_str = ['red', 'blue', 'green', 'black'];
for (var $x = 0; $x < color_value.length; $x ++)
{
    var id = "option#" + color_str[$x];
    if (color_value[$x] <= 0) {
        $(id).hide();
    }
}

正如@dfsq已经提到的，为此使用对象会好得多，因为颜色及其值是相关的数据片段。除非您有充分的理由这样做，否则使用 2 个单独的数组来保存数据并不理想。