Javascript数组包含值

问题描述：

<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阵列：Javascript数组包含值

{ 
    "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);

答

这里是我的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); 
})

答

一个更好的解决办法是与

{"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根据复选框是否被选中而变为空字符串或“检查”。

尼斯一个，这一个我第一次想完整的解决方案......但我有点新来的，我怎么能操纵一个这样的数组？ – Red

@DileepDil：你是指json对象中的数组吗？如果返回的对象是'data'，就像例子中的那样，你只需要使用'data.src [0] .src'，'data.src [0] .checked'，'data.src [1] .src'，'data .src [1] .checked'等等来访问这些值。你可以像对待任何其他变量一样指定给它们。 – flesk

答

您可以使用阵列

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。

Javascript数组包含值

相关推荐