Question

我试图制作一个图片选择器，但循环不起作用。

它应该使所选的div 橙色，并将其他div 白色。

function ClickPic(id)
{
    document.getElementById("pic"+id).style.backgroundColor='orange';
    for(var i = 0; i < 310; i++)
    {
        if(!i == id)
        {
            document.getElementById("pic"+i).style.backgroundColor='white';
        }
    }
}

点击时div会变成橙色，但其他人也会保持橙色。

Answer 1

看看你的功能和你的需求，看起来你想要这样的东西..

您可以运行我的工作示例：

function ClickPic(id)
{
    // Get the div and set the div orange    
    var selected_div = document.getElementById("pic"+id);
    selected_div.style.backgroundColor = 'orange';
  
    // Looping through 16 divs i've created
    for(var i = 0; i < 16; i++)
    {
        if(i != id) // Changed the operation
        {
            document.getElementById("pic"+i).style.backgroundColor='white';
        }
    }
}

.my-div{
   background-color: white;
   height: 30px; 
   width: 30px;
   cursor: pointer;
   border: 1px solid #000;
   float:left;
   margin: 0 10px 10px 0
}

<div id="pic0" onclick="ClickPic('0')" class="my-div"></div>
<div id="pic1" onclick="ClickPic('1')" class="my-div"></div>
<div id="pic2" onclick="ClickPic('2')" class="my-div"></div>
<div id="pic3" onclick="ClickPic('3')" class="my-div"></div>
<div id="pic4" onclick="ClickPic('4')" class="my-div"></div>
<div id="pic5" onclick="ClickPic('5')" class="my-div"></div>
<div id="pic6" onclick="ClickPic('6')" class="my-div"></div>
<div id="pic7" onclick="ClickPic('7')" class="my-div"></div>
<div id="pic8" onclick="ClickPic('8')" class="my-div"></div>
<div id="pic9" onclick="ClickPic('9')" class="my-div"></div>
<div id="pic10" onclick="ClickPic('10')" class="my-div"></div>
<div id="pic11" onclick="ClickPic('11')" class="my-div"></div>
<div id="pic12" onclick="ClickPic('12')" class="my-div"></div>
<div id="pic13" onclick="ClickPic('13')" class="my-div"></div>
<div id="pic14" onclick="ClickPic('14')" class="my-div"></div>
<div id="pic15" onclick="ClickPic('15')" class="my-div"></div>

希望它有所帮助！

Answer 2

尝试：

if(i != id)
{
    document.getElementById("pic"+i).style.backgroundColor='white';
}

Answer 3

感谢您的帮助。因为有一些div id丢失（例如pic0，pic3，pic66）我必须先检查div是否存在。

%%1

For循环不适用于图像选择器

3 个答案: