javascript - 在我的案例中，哪种显示动态单选按钮的方法更好？

Question

假设我的 javascript 调用了服务器(AJAX 调用)，然后得到了带有数据数组的服务器响应:dataArray。

dataArray 中的数据数量将是 1 或 2 或 3，即不超过 3。

我想将数据显示为单选按钮选择。由于数据数量是动态的(1 或 2 或 3)，所以我应该动态显示单选按钮。

我想出了两种方法来做到这一点:

第一种方式:在 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中的数据个数，隐藏和显示一定数量的上述单选按钮。

第二种方式:使用 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

由于您已经有了几个解决方案，因此真正归结为对每个解决方案的优点进行讨论。

第一种方法:

• 您不必创建任何标记，因为它已经存在。
• 如果要隐藏这些元素，则可以使用 display:none 或 visibility:hidden，后者会保留页面中的空间 布局，以便在显示元素时不会移动元素。
• 如果您的预期元素数量增加，添加另一个 radio 有什么不好 标记的按钮？

第二种方法:

• 允许您通过增加数组中数据元素的数量来简单地增加显示的单选按钮数量。
• 它可能不会影响你的决定，因为它看起来像你的 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 个元素的空间产生巨大差异，但如果你增加这可能会开始累加。