La matriz de JavaScript contiene valor
-
26-10-2019 - |
Pregunta
<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>
En la carga de la página, devuelvo una matriz JSON:
{
"src":["lml7x8nJzI.jpg","TaR7dALIPJ.jpg","TDE2pWgIfa.jpg","tUtuDx1BEf.jpg"],
"checked":["lml7x8nJzI.jpg","TaR7dALIPJ.jpg","tUtuDx1BEf.jpg"]
}
- los
src
contiene todos los nombres de la imagen ychecked
es el tipo de verificación marcado de casillas de verificación. - los
checked
Define qué imagen está marcada (cada imagen tiene una casilla de verificación).
Necesito el HTML final como este:
<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>
Puedo usar array contains
En JavaScript, ¿o hay una mejor manera?
Mi intento:
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);
Solución
Aquí está mi solución completa usando índicef
$(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);
})
Otros consejos
Puedes usar índice de método de matriz
var a = ['a', 'b', 'c'];
if (a.indexOf('a') > -1 ) {
//element is in array
} else {
//element is not in array
}
Tenga en cuenta que el método indexOf está ausente en IE6, pero Mozilla hay una implementación disponible en el misma página.
Un mejor enfoque sería reemplazar
{"src":["lml7x8nJzI.jpg","TaR7dALIPJ.jpg","TDE2pWgIfa.jpg","tUtuDx1BEf.jpg"],
"checked":["lml7x8nJzI.jpg","TaR7dALIPJ.jpg","tUtuDx1BEf.jpg"]}
con
{"src":[
{"src": "lml7x8nJzI.jpg", "checked": true},
{"src": "TaR7dALIPJ.jpg", "checked": true},
{"src": "TDE2pWgIfa.jpg", "checked": false},
{"src": "tUtuDx1BEf.jpg", "checked": true}]
}
por ejemplo.
Entonces podrías escribir
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>";
}
}
Lo único diferente entre las dos cadenas que haces es el atributo checked
(que realmente debería ser checked="checked"
Si desea seguir los estándares), por lo que preferiría establecer una variable checked
ya sea una cadena vacía o "marcado" dependiendo de si la casilla de verificación está marcada o no.