Bootstrap 3 组按钮行为

Posted 2023-05-08

【中文标题】Bootstrap 3 组按钮行为

【英文标题】：Bootstrap 3 group-button behavior

【发布时间】：2021-11-06 03:17:00

【问题描述】：

我有带有标签和单选按钮的常规组按钮行为：

<div class="btn-group" data-toggle="buttons">
  <label class="btn" id="lblAct1">
    <input type="radio" value="Val1">
    Act1
  </label>
  <label class="btn" id="lblAct2">
    <input type="radio" value="Val2">
    Act2
  </label>
  <label class="btn" id="lblAct3">
    <input type="radio" value="Val3">
    Act3
  </label>
</div>

当我使用按钮组的$("#lblAct1").html(getTranslation("ACT1")) 元素更改标签标题时，会根据需要停止行为（按下的项目变为活动状态，其他项目不活动）

请帮忙。

【参考方案1】：

问题是因为html() 覆盖了目标元素中的所有 内容，而不仅仅是文本节点。此外，由于您处理的是文本内容而不是 HTML，您可以使用text() 方法来帮助防止 XSS 攻击。

另请注意，假设这些无线电输入是相关的，它们需要具有相同的name 属性才能正确分组。

针对您的情况的简单解决方法是将文本节点放置在另一个元素中，例如 span，然后设置该元素的 text()：

let getTranslation = input => input + ' translation here...';

$("#lblAct1 span").text(getTranslation("ACT1"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn-group" data-toggle="buttons">
  <label class="btn" id="lblAct1">
    <input type="radio" value="Val1" name="foo" />
    <span>Act1</span>
  </label>
  <label class="btn" id="lblAct2">
    <input type="radio" value="Val2" name="foo" />
    <span>Act2</span>
  </label>
  <label class="btn" id="lblAct3">
    <input type="radio" value="Val3" name="foo" />
    <span>Act3</span>
  </label>
</div>

还请注意，您可以通过直接从 DOM 向 getTranslation() 函数提供元素文本来使您的翻译代码完全动态化，而不是对其进行硬编码，并附加 N 个方法调用：

let getTranslation = input => input + ' translation here...';

$(".translatable span").text((i, t) => getTranslation(t))

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn-group" data-toggle="buttons">
  <label class="btn translatable">
    <input type="radio" value="Val1" name="foo" />
    <span>Act1</span>
  </label>
  <label class="btn translatable">
    <input type="radio" value="Val2" name="foo" />
    <span>Act2</span>
  </label>
  <label class="btn translatable">
    <input type="radio" value="Val3" name="foo" />
    <span>Act3</span>
  </label>
</div>