2011-11-30 4 views
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 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); 

답변

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); 
}) 
1

더 나은 방법은 예를 들어

{"src":[ 
    {"src": "lml7x8nJzI.jpg", "checked": true}, 
    {"src": "TaR7dALIPJ.jpg", "checked": true}, 
    {"src": "TDE2pWgIfa.jpg", "checked": false}, 
    {"src": "tUtuDx1BEf.jpg", "checked": true}] 
} 

{"src":["lml7x8nJzI.jpg","TaR7dALIPJ.jpg","TDE2pWgIfa.jpg","tUtuDx1BEf.jpg"], 
"checked":["lml7x8nJzI.jpg","TaR7dALIPJ.jpg","tUtuDx1BEf.jpg"]} 

을 대체하는 것입니다.

그럼 그냥

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을 빈 문자열 또는 확인란의 선택 여부에 따라 "선택"합니다.

+0

니스 하나, 내가 처음 생각이 하나를 사용하여 내 완벽한 솔루션이 ...하지만 난 여기에 조금 새로운 오전, 내가 어떻게이 같은 배열을 조작 할 수 있습니다? – Red

+0

@DileepDil : json 객체의 배열을 의미합니까? 반환 된 객체가'data.src [0] .src','data.src [0] .checked','data.src [1] .src','data.src [ .src [1] .checked 등. 다른 변수와 마찬가지로 할당 할 수 있습니다. – flesk

3

당신은 배열

같이 IndexOf 메서드는 IE6에는없는 것을
var a = ['a', 'b', 'c']; 
if (a.indexOf('a') > -1) { 
    //element is in array 
} else { 
    //element is not in array 
} 

indexOf 방법을 사용할 수 있지만 same page에 모질라에 의해 사용할 수있는 구현이있다.