array di Javascript contiene valore
-
26-10-2019 - |
Domanda
<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>
Il caricamento della pagina, torno un array di JSON:
{
"src":["lml7x8nJzI.jpg","TaR7dALIPJ.jpg","TDE2pWgIfa.jpg","tUtuDx1BEf.jpg"],
"checked":["lml7x8nJzI.jpg","TaR7dALIPJ.jpg","tUtuDx1BEf.jpg"]
}
- Il
src
contiene tutti i nomi di origine di immagine e dichecked
è il tipo controllato di caselle di controllo. - I
checked
definisce quale immagine è selezionata (ogni immagine ha una casella di controllo).
Ho bisogno il codice HTML finale in questo modo:
<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>
posso usare array contains
in JavaScript, o c'è un modo migliore?
Il mio tentativo:
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);
Soluzione
Ecco la mia soluzione completa utilizzando 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);
})
Altri suggerimenti
È possibile utilizzare il metodo indexOf di Array
var a = ['a', 'b', 'c'];
if (a.indexOf('a') > -1 ) {
//element is in array
} else {
//element is not in array
}
Si noti che il metodo indexOf è assente in IE6, ma v'è un'implementazione disponibile da Mozilla sul stessa pagina .
Un approccio migliore sarebbe quello di sostituire
{"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}]
}
per esempio.
Poi si può solo scrivere
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>";
}
}
L'unica cosa diversa tra le due stringhe che si fanno è la checked
attributi (che in realtà dovrebbe essere checked="checked"
se si vuole seguire gli standard), quindi preferirei impostazione di una checked
variabile sia una stringa vuota o "controllati" a seconda se la casella è selezionata o meno.