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

【问题标题】：For loop doesn't work for image selectorFor 循环不适用于图像选择器
【发布时间】：2017-01-31 09:37:03
【问题描述】：

我正在尝试制作图片选择器，但循环不起作用。

应该让选中的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 变为橙色，但其他 div 也保持橙色。

【问题讨论】：

Operator Precedence

标签： javascript html image for-loop select

【解决方案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>

希望对你有帮助！

【讨论】：

【解决方案2】：

感谢您的帮助。因为缺少一些 div id (例如 pic0,pic3,pic66) 我必须先检查 div 是否存在。

function ClickSkin(id)
{
    // Get the div and set the div orange    
    var selected_div = document.getElementById("pic"+id);
    selected_div.style.backgroundColor = 'orange';

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

【讨论】：

【解决方案3】：

试试：

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

【讨论】：

还是不行。单击时 div 变为橙色，但其他 div 也保持橙色。