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

我会选择第二种，因为它在不同数量的单选按钮方面更具可扩展性。虽然你说它永远不会超过3，但是如果你可以避免它，为什么要强制限制呢？

Answer 2

这个问题的答案是一个很大的“它取决于”。但是，如果没有任何关于您的申请细节的先验知识（即假设业务要求永远不会改变），我会说“与你的直觉一起去”。也就是说，哪一个在其余代码的上下文中更容易理解/使用？

就个人而言，我会选择你的第一个解决方案，因为它更清晰地将HTML逻辑与Javascript逻辑分开。

但是还有其他竞争性的想法（可扩展性，DOM混乱等等）可能会影响你使用一种方法或另一种方法。

Answer 3

由于你已经有了几个解决方案，它实际上归结为讨论每个解决方案的优点。

采用第一种方法：

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

第二种方法：

允许您通过增加阵列中数据元素的数量来增加显示的单选按钮数量。
它可能不会影响你的欲望，因为它看起来像你的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个单选按钮，我建议选择第一个选项。这是最简单的。如果您必须处理 n 单选按钮，则可能需要更复杂的解决方案。

表单处理将变得更加容易，因为您不必对动态生成的单选按钮进行任何预提交客户端或提交后服务器端处理。

记住： K.I.S.S。 - 保持简单，愚蠢

在我的情况下，哪种更好的方式来显示动态单选按钮？

4 个答案: