使用 jQuery 的三元运算符答案

【问题标题】：Ternary operators using jQuery使用 jQuery 的三元运算符
【发布时间】：2020-11-07 11:41:20
【问题描述】：

我正在尝试创建一个包含 4 个可能值的表单（类型：单选按钮）。我想选择一个，然后将其值保存在 .txt 文件中。

这是我的代码的一部分：

"Booster: " + ($("#tipoBooster").is(":checked")?"block I":"dark knight":"f1b":"custom")`

当我执行它时，它返回uncaught syntax error unexpected token ":"。

如何修改？还能链接一些网上的例子吗？

我的想法是：我的表单带有这些单选按钮：

O block I   O dark knight   O f1b   O custom

如果我选择一个，我想写"Booster: *selected one* " 作为我的输出（一个字符串）。

你有什么建议？

【问题讨论】：

三元运算符在两个之间选择一个输出（“：”左侧的true和右侧的false）为什么有四个选项？
我加了一个例子...我需要在这四个之间进行选择，否则代码将不适合我想做的事情
这是一个三元运算符，而不是五元运算符... ^^

标签： javascript html jquery forms conditional-operator

【解决方案1】：

我不是 100% 你想要做的，但如果我理解正确，你可以这样做：

<div>
  <input type="radio" name="tipoBooster" value="block I">
  <label>block I</label><br>
  <input type="radio" name="tipoBooster" value="dark knight">
  <label>dark knight</label><br>
  <input type="radio" name="tipoBooster" value="f1b">
  <label>f1b</label>
  <div id="showStr"></div>
</div>

 var divelm = $('#showStr');
 $("input[name='tipoBooster']").on('change', function() {
    if($(this).is(':checked')){
    divelm.text('Booster: ' + $(this).val());
  }
 });

如果您想稍微压缩一下，可以使用 && 执行类似的操作，仅在左侧为真时运行右侧的语句：

var divelm = $('#showStr');
 $("input[name='tipoBooster']").on('change', function() {
    $(this).is(':checked') && divelm.text('Booster: ' + $(this).val());
 });

【讨论】：

【解决方案2】：

您应该在决策中涉及的所有input[type=radio] 元素的"change" 上添加一个事件侦听器

每次检查输入时都会触发侦听器。当一个收音机被取消检查时它不会被触发，因为另一个收音机被检查了，所以监听器的执行保证每个"change"只运行一次。

在事件侦听器中，您可以检查event.target.value 属性以获取选中的单选按钮，然后您可以根据需要操作 DOM。

Here is an example

【讨论】：

【解决方案3】：

三元运算符在:之后只能有一个其他运算符

见https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

如果你想把它分成一行，你需要把它分成多个三元表达式，但我不确定这就是你要找的......

const isChecked = $("#tipoBooster").is(":checked");
const text = "Booster: " + (isChecked ? "block I" : (mySecondCondition ? "dark knight" : (myThirdCondition ? "f1b" : "custom")))

也就是说，我不能 100% 确定您希望如何将其应用于建立广播组，但这里有一些很好的文档：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio

【讨论】：