배열을 통해 루프, 각 항목을 새 줄로 출력하십시오.

Question

배열을 반복하고 각 항목을 단추를 클릭하여 새 줄에 쓰려고합니다. 현재 버튼을 클릭하면 아무 일도 일어나지 않습니다.

코드에 오류가 표시되지 않았습니다 어디에서 잘못 되었습니까?

$(document).ready(function() { 
 

 
    var vehicle = ["G122 IVL", "H151 KEE", "U109 FIJ"]; 
 

 
    var cameraOne = function() { 
 

 
    $.each(vehicle, function(index, value) { 
 
     $('#c1').html('<p>' + value + '</p>'); 
 
    }); 
 
    }; 
 

 
    $('#cameraOne').click(function() { 
 
    cameraOne(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<div> 
 
    <input type="button" id="cameraOne" value="Camera One" /> 
 
    <div id="c1"></div> 
 
</div>

Answer 1

당신이 추가 할 때, 각각의 새로운 라인 #c1의 내용을 덮어있어 :

$(document).ready(function() { 
 

 
    var vehicle = ["G122 IVL", "H151 KEE", "U109 FIJ"]; 
 

 
    var cameraOne = function() { 
 
    $('#c1').empty(); 
 

 
    $.each(vehicle, function(index, value) { 
 
     // use .text() instead of just writing the value to the <p> tag, so we're safe 
 
     // if the value contains <, etc. 
 
     $('#c1').append($('<p>').text(value)); 
 
    }); 
 
    }; 
 

 
    $('#cameraOne').click(function() { 
 
    cameraOne(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<div> 
 
    <input type="button" id="cameraOne" value="Camera One" /> 
 
    <div id="c1"></div> 
 
</div>

사용하는 대신

Answer 2

'HTML '$('#c1').html('<p>' + value + '</p>');은 줄을 각각 덮어 씁니다. 값을 찾을 때마다 'append'$('#c1').append('<p>' + value + '</p>');을 사용하여 각 값에 대한 새 행을 만들어야합니다.

Answer 3

이 시도 : 당신이 마지막 값을 얻을 수 있도록

$(document).ready(function() { 

var vehicle = ["G122 IVL", "H151 KEE", "U109 FIJ"]; 

var cameraOne = function() { 

    $.each(vehicle, function(index, value) { 
     $('#c1').append('<p>' + value + '</p>'); 
    }); 
}; 

$('#cameraOne').click(function() { 
     cameraOne(); 
    }); 
}); 

html는 내용을 덮어 씁니다. 대신 append을 사용하십시오.