在我的例子中，这是显示动态单选按钮的更好方式

Which is the better way to show dynamic radio buttons in my case?

本文关键字：动态 显示 单选按钮 方式 更好 我的      更新时间：2023-09-26

假设我的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>");
}

我在想，哪一种方式更好?

既然您已经有了几个解决方案，那么就需要讨论每个解决方案的优点了。

使用第一种方法:

  • 你不需要创建任何标记，因为它已经在那里了。
  • 如果你想隐藏这些元素，你可以使用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个元素的空间内不会产生很大的差异，但如果你增加这个值，可能会开始增加

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

这个问题的答案是一个很大的"视情况而定"。但是，在没有事先了解您的应用程序细节(即假设业务需求永远不会改变)的情况下，我说"跟着你的直觉走"。也就是说，在其余代码的上下文中，哪一个更容易理解/使用?

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

但是，还有其他与之竞争的想法(可扩展性、DOM混乱等)可能会影响您使用其中一种方法。

如果最多有3个单选按钮，我建议使用第一个选项。这是最简单的。如果您必须处理n单选按钮，那么可能需要更复杂的解决方案。

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

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

相关文章：