Javascript数组包含值
Javascript array contain value
<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
设置为空字符串或"选中",具体取决于复选框是否选中。
相关文章:
- Lodash 从值数组中查找数组中的值
- 使用Undercore获取属性值数组
- 选择具有值数组的所有元素的最有效方法
- 使用jquery grep过滤具有值数组的json对象
- 如何使用JQuery将值数组插入到数据库中
- 创建属性值数组,其中属性名称以特定字符串结尾
- 如何在jqueryajax中发布值数组
- 如何在不赋值数组变量的情况下读取数组数据
- Lodash 从与值数组不匹配的数组中获取项目
- 下划线,将对象列表转换为对象值数组
- JavaScript 自包含函数数组访问自我索引
- 将键/值数组中的对象与另一个对象(键/值)进行比较
- 使用Node中的Q promise库对值数组顺序调用/执行相同的函数;并返回带有结果的新数组/集合
- 创建一个计算值数组,该数组绑定到AngularJS中的其他输入
- 将JavaScript对象转换为值数组
- 如何对姓氏进行排序,格式化电话号码,并返回一个包含对象数组值的字符串
- 仅包含某些数组值的单个弹出窗口.JavaScript
- 包含键和值数组的字典
- 确保我的随机值数组不包含重复值
- 创建一个 json 文件,其中包含键的值数组