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

Question

我正在尝试制作图片选择器，但循环无法正常工作。

它应该使选定的分区橙色，并打开其他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'; 
     } 
    } 
} 

当点击时divs变成橙色，但其他人保持橙色。

Answer 1

尝试：

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

Answer 2

寻找到你的功能和您的需要，看起来像你想是这样的..

可以运行我的职业例如：

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 3

感谢您的帮助。 因为有一些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'; 
      } 
     } 
    } 
}