1 
<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>

array containsJavaScriptで使用できますか、それとももっと良い方法がありますか？

私の試み：

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);
4

3 に答える 3

3

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 によって利用可能な実装があることに注意してください。

于 2011-11-30T06:44:45.857 に答える
1

これが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);
})
于 2011-11-30T06:47:07.033 に答える
1

より良いアプローチは、交換することです

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

作成する2つの文字列の唯一の違いは属性です（標準に従いたい場合checkedは実際にそうあるべきです）ので、チェックボックスがチェックされているかどうかに応じて、変数を空の文字列または「チェック済み」に設定することをお勧めしますか否か。checked="checked"checked

于 2011-11-30T06:44:38.893 に答える