Какой лучший способ показать динамические переключатели в моем случае?

Question

Предположим, мой javascript называется сервером (вызов AJAX), а затем получил ответ сервера с массивом данных: dataArray.

число данных в dataArray будет равно либо 1, либо 2, либо 3это не более 3 .

Я хотел бы показать данные в качестве переключателей.Поскольку количество данных является динамическим (1, 2 или 3), поэтому я должен динамически отображать переключатели.

Я предложил два способа сделать это:

1-й способ: имеет три переключателя в HTML:

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

, затем скрывает и отображает определенное количество вышеуказанных переключателей на основе количества данных в dataArray.

2-й способ: использовать javascript для добавления переключателя HTML-строки:

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

}

Мне интересно, какой способ лучше?

Answer 1

Если когда-нибудь будет максимум 3 переключателя, я бы порекомендовал выбрать первый вариант.Это самое простое.Если вам приходилось иметь дело с радиокнопками n , то может потребоваться более сложное решение.

Обработка формы будет намного проще, так как вам не придется делать предварительную отправкуОбработка клиентом или после отправки серверной стороны динамически сгенерированных переключателей.

Помните: KISS - Keep It Simple, Stupid

Answer 2

Ответ на этот вопрос большой "это зависит".Но без каких-либо предварительных знаний о деталях вашего приложения (т. Е. При условии, что бизнес-требования никогда не изменятся), я говорю: «Идите вперед».То есть, какой из них легче понять / использовать в контексте остальной части вашего кода?

Лично я бы пошел с вашим первым решением, потому что оно более четко отделяет логику HTML от Javascriptлогика.

Но есть и другие конкурирующие идеи (расширяемость, беспорядок в DOM и т. д.), которые могут побудить вас использовать один или другой метод.

Answer 3

Поскольку у вас уже есть пара решений, на самом деле все сводится к обсуждению достоинств каждого из них.

При первом подходе:

• Вам не нужносоздайте любую разметку, поскольку она уже есть.
• Если вы скрываете эти элементы, вы можете использовать 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);

Предотвращает многократный поиск элемента my-radio-btns -не будет иметь большого значения для пространства из 3 элементов, но если вы увеличите его, это может начать суммироваться.

Answer 4

Я бы пошел со вторым, так как он более масштабируемый с точки зрения различного количества переключателей.Хотя вы говорите, что никогда не будет больше 3, зачем вводить это ограничение, если вы можете его избежать?