单击单选按钮时更改文本

Changing text when clicking radio button

本文关键字：文本 单选按钮 单击      更新时间：2023-09-26

我在同一页上多次列出了以下代码，我希望能够在单击单选按钮时在 foo-title span 元素中显示数据名称值。问题在于，因为 .foo-title span 在 DOM 中多次出现，所以文本在任何地方都在更新，而不是在 1 位。我已经尝试了几种方法，例如 .parent（） .最接近.prev（） 但无法弄清楚。

标签使用背景图像设置样式，并且文本被隐藏，这就是为什么我想做上述操作以向用户显示一些文本信息以出于可访问性原因。

.HTML

<div class="col-sm-4">
  <p class="foo-title">
    <span></span>
  </p>
  <ul class="foo-container-list">
    <li class="foo-list-item">
      <input class="foo-input" data-name="red" id="foo_id_1" name="foo_id" type="radio" value="1">
      <label for="foo_id_1">red</label>
    </li>
    <li class="foo-list-item">
       <input class="foo-input" data-name="green" id="foo_id_2" name="foo_id" type="radio" value="2">
       <label for="foo_id_2">green</label>
    </li>
    <li class="foo-list-item">
       <input class="foo-input" data-name="blue" id="foo_id_3" name="foo_id" type="radio" value="3">
       <label for="foo_id_3">blue</label>
    </li>
  </ul>
</div>

.JS

fooBar.updateFooName = function(foo) {
  var fooName = foo.data('name');
  if (fooName) {
    $('.foo-title span').text(fooName);
  }
};
$(document).ready(function() {
  $("input[name=foo_id]:radio").change(function() {
    fooBar.updateFooName($(this));
  });
});

fooBar.updateFooName = function() {
  var fooName = $(this).data('name');
  if (fooName) {
    $(this).closest('[class^="col-sm"]').find('.foo-title span').text(fooName);
  }
};
$(document).ready(function() {
  $("input[name=foo_id]:radio").change(fooBar.updateFooName);
});

小提琴

相关文章：