Javascript数组包含值

Question

<div id="image_div"> 
<input type="checkbox" /> 
<img src="1.jpg" /> 
<input type="checkbox" /> 
<img src="2.jpg" /> 
<input type="checkbox" /> 
<img src="3.jpg" /> 
<input type="checkbox" /> 
</div> 

在页面加载，我回一个JSON阵列：

{ 
    "src":["lml7x8nJzI.jpg","TaR7dALIPJ.jpg","TDE2pWgIfa.jpg","tUtuDx1BEf.jpg"], 
    "checked":["lml7x8nJzI.jpg","TaR7dALIPJ.jpg","tUtuDx1BEf.jpg"] 
} 

• 的src包含图像的所有源名称和checked是的复选框选中的类型。
• checked定义检查哪个图像（每个图像都有一个复选框）。

我需要最终的HTML这样的：

<div id="image_div"> 
<input type="checkbox" /> 
<img src="lml7x8nJzI.jpg" /> 
<input type="checkbox" checked />    //this is a checked one 
<img src="TaR7dALIPJ.jpg" />  
<input type="checkbox" checked/>     //this is a checked one 
<img src="TDE2pWgIfa.jpg" /> 
<input type="checkbox" />     //this is not 
<img src="tUtuDx1BEf.jpg" />  
<input type="checkbox" checked /> //this is a checked one 
</div> 

我可以在JavaScript中使用array contains，或者是有没有更好的办法？

我尝试：

var initial = "<ul class='gallary'>"; 
var middle = ""; 
var end = "</ul>"; 
var i; 

for (i = 0; i < data.src.length; i++) 
{ 
    if (data.checked.contains(data.src[i])) // How can I do this? 
    { 
     middle = middle + 
      "<li><img src=" + 
      "http://localhost/project/user/" + 
      "<?php echo $this->session->userdata('username');?>" + 
      "/pages/" + 
      "<?php echo $this->uri->segment(3);?>" + 
      "/images/gallery/" + 
      data.src[i] + 
      " />" + 
      "<br /><input type='checkbox' value=" + 
      data.src[i] + 
      " checked/></li>"; 
    } 
    else 
    { 
     middle = middle + 
      "<li><img src=" + 
      "http://localhost/project/user/" + 
      "<?php echo $this->session->userdata('username');?>" + 
      "/pages/" + 
      "<?php echo $this->uri->segment(3);?>" + 
      "/images/gallery/" + 
      data.src[i] + 
      " />" + 
      "<br /><input type='checkbox' value=" + 
      data.src[i] + 
      " /></li>"; 
    } 
} 

var complete = initial + middle + end; 
$("#project_gallary_layout").html(complete); 

Answer 1

这里是我的indexOf使用

$(function(){ 
    var url = 'http://localhost/project/user/<?php echo $this->session->userdata('username'); ?>/pages/<?php echo $this->uri->segment(3); ?>/images/gallery/' 
    , complete = '<ul class="gallery">' 

    data.src.forEach(function(src){ 
    complete += '<li><img src="' + url + src + '"><input type="checkbox" value="' + src + '"' 
    if(data.checked.indexOf(src) > -1){ 
     complete += ' checked' 
    } 
    complete += '></li>' 
    }) 

    $("#project_gallary_layout").html(complete); 
}) 

Answer 2

一个更好的解决办法是与

{"src":[ 
    {"src": "lml7x8nJzI.jpg", "checked": true}, 
    {"src": "TaR7dALIPJ.jpg", "checked": true}, 
    {"src": "TDE2pWgIfa.jpg", "checked": false}, 
    {"src": "tUtuDx1BEf.jpg", "checked": true}] 
} 

例如更换

{"src":["lml7x8nJzI.jpg","TaR7dALIPJ.jpg","TDE2pWgIfa.jpg","tUtuDx1BEf.jpg"], 
"checked":["lml7x8nJzI.jpg","TaR7dALIPJ.jpg","tUtuDx1BEf.jpg"]} 

。

然后，你可以只写

for(i=0;i<data.src.length;i++) { 
    var elem = data.src[i]; 
    var checked = ""; 
    if (elem.checked) 
     checked = "checked"; 
    middle = middle + 
     "<li><img src=" + 
     "http://localhost/project/user/" + 
     "<?php echo $this->session->userdata('username');?>" + 
     "/pages/" + 
     "<?php echo $this->uri->segment(3);?>" + 
     "/images/gallery/" + 
     elem.src + 
     " />" + 
     "<br /><input type='checkbox' value=" + 
     elem.src + 
     " " + 
     checked + 
     "/></li>"; 
    } 
} 

你让两个字符串之间唯一不同的是属性checked（如果你想遵循标准，确实应该checked="checked"），所以我宁愿设置一个变量checked根据复选框是否被选中而变为空字符串或“检查”。

Answer 3

您可以使用阵列

var a = ['a', 'b', 'c']; 
if (a.indexOf('a') > -1) { 
    //element is in array 
} else { 
    //element is not in array 
} 

注意的indexOf方法在IE6缺席indexOf方法，但对same page可实现由Mozilla。