<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);
可以使用Array的indexOf方法
var a = ['a', 'b', 'c'];
if (a.indexOf('a') > -1 ) {
//element is in array
} else {
//element is not in array
}
请注意,indexOf方法在IE6中不存在,但Mozilla在同一页面上提供了一个实现。
这是我使用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":["lml7x8nJzI.jpg","TaR7dALIPJ.jpg","TDE2pWgIfa.jpg","tUtuDx1BEf.jpg"],
"checked":["lml7x8nJzI.jpg","TaR7dALIPJ.jpg","tUtuDx1BEf.jpg"]}
{"src":[
{"src": "lml7x8nJzI.jpg", "checked": true},
{"src": "TaR7dALIPJ.jpg", "checked": true},
{"src": "TDE2pWgIfa.jpg", "checked": false},
{"src": "tUtuDx1BEf.jpg", "checked": true}]
}
例如。
那么你可以直接写
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
设置为空字符串或"选中",具体取决于复选框是否选中。