필자의 경우 동적 라디오 버튼을 표시하는 가장 좋은 방법은 무엇입니까?

Question

자바 스크립트가 server (AJAX 호출)라고 가정하고 데이터 배열이 서버 응답 인 경우 dataArray이라고 가정합니다.

dataArray에있는 데이터의 수는 1 또는 2 또는 3이고, 은 3입니다.

데이터를 라디오 버튼 선택으로 표시하고 싶습니다. 데이터의 수가 동적이므로 (1 또는 2 또는 3) 라디오 버튼을 동적으로 표시해야합니다.

나는이 작업을 수행하는 방법은 두 가지를 내놓았다 :

첫번째 방법 : 다음, 숨길

<div id="my-radio-btns"> 
    <input id="data0" type="radio" name="datas" value="0"><label for="data0"></label> 
    <input id="data1" type="radio" name="datas" value="1"><label for="data1"></label> 
    <input id="data2" type="radio" name="datas" value="2"><label for="data2"></label> 
</div> 

하고, 상기 라디오 버튼의 특정 번호를 보여는 HTML에서 세 개의 라디오 버튼이 dataArray에있는 데이터의 수를 기반으로합니다.

두번째 방법 : 더 나은하는 방법입니다, 내가 궁금

for(var i=0; i<dataArray.length; i++){ 

    $('#my-radio-btns').append("<input id='data"+i+"type='radio' name='datas' value="+i+"> <label for='data"+i+"></label>"); 

} 

: 라디오 버튼 HTML 문자열을 추가하는 자바 스크립트 사용?

Answer 1

이미 몇 가지 해결책을 제시 했으므로 각각의 장점에 대한 토론으로 이어집니다. 첫 번째 방법으로

는 :

• 당신은 이미 거기로 마크 업을 만들 필요가 없습니다.
• 이러한 요소를 숨기면 display : none 또는 visibility : hidden을 사용할 수 있습니다. 후자는 표시 할 때 요소가 이동하지 않도록 페이지 페이지의 공간을 예약합니다.
• 예상되는 요소 수가 많아지면 다른 라디오 버튼을 마크 업에 추가하는 것이 좋지 않을까요?

번째 방법 :

• 는 단순히 배열의 데이터 요소의 수를 증가시킴으로써 표시 라디오 버튼의 수를 증가시킬 수.
• DOM 조작이 매우 미흡한 것처럼 보이지만 jquery에서 가장 비싼 조작 중 하나가 DOM을 수정하고있는 것처럼 보일 수도 있습니다. 생각할 무언가. 또한

, 나는 두 번째 코드 샘플에 약간의 개선 제안 할 수 있습니다 :

var markup = ""; 
for(var i=0; i<dataArray.length; i++){ 
    markup += "<input id='data"+i+"type='radio' name='datas' value="+i+"> <label for='data"+i+"></label>"; 
} 

$('#my-radio-btns').append(markup); 

가 내 라디오 - btns 요소의 여러 조회를 방지를 - 오버 차이의 엄청난 금액을하지 않습니다 공간이 3 개이지만 공간을 늘리면 더할 수 있습니다.

Answer 2

라디오 버튼 수에 따라 확장 성이 뛰어 나기 때문에 두 번째 옵션을 사용할 것입니다. 당신이 3을 넘지 않을 것이라고 말하지만, 당신이 그것을 피할 수 있다면 그 제한을 강요하는 이유는 무엇입니까?

Answer 3

이 질문에 대한 대답은 큰 "it depends"입니다. 그러나 비즈니스 세부 사항에 대한 사전 지식없이 (즉, 비즈니스 요구 사항이 절대로 바뀌지 않는다는 가정하에) 나는 "당신의 용기와 함께"라고 말합니다. 즉, 코드의 나머지 부분에서 이해하기 쉽고/사용하기 쉬운 것이 어느 것입니까?

개인적으로는 자바 로직과 HTML 로직을보다 깔끔하게 구분하기 때문에 개인적으로 첫 번째 해결책을 생각해 볼 수 있습니다.

그러나 한 가지 방법이나 다른 방법을 사용하는 데 영향을 줄 수있는 다른 경쟁 아이디어 (확장 성, DOM 클러 터 등)가 있습니다.

Answer 4

최대 3 개의 라디오 버튼이있는 경우 첫 번째 옵션을 사용하는 것이 좋습니다. 가장 간단한 방법입니다. n 라디오 버튼을 처리해야하는 경우보다 정교한 솔루션이 필요합니다.

동적으로 생성 된 라디오 버튼에 대한 사전 제출 클라이언트 측 또는 제출 후 서버 측 처리를 수행 할 필요가 없으므로 양식 처리가 훨씬 쉬워집니다.

기억 : K.I.S. - 간단하게, 바보로 유지