另一个for循环javascript内部的for循环（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.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个单独的数组保存数据并不理想。

Answer 2

您混淆了索引变量，它应该是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()它们或使用许多解决方法之一。