javascript - 如何使用具有唯一 ID/名称的 JQuery 增加/附加单选按钮？

Question

我正在尝试做的是使用简单的“确认/拒绝”选项增加/附加单选按钮。 从逻辑上讲，当我们追加或递增单选按钮时，单选按钮的 ID 和名称会发生​​变化。

所以我想弄清楚的是:每当我们点击一​​个按钮时，它会添加:

<H1>David's Attendance: <span>Confirmed</span></H1> 

带有确认和拒绝单选按钮，因此无论您选择哪个选项， 从“已确认”变为“已拒绝”。那部分有效。

问题是每次生成元素时，所有跨度都会发生变化。我想要一种方法来生成仅适用于生成的 H1“部分”的单选按钮。这个想法是:你点击一个按钮来生成一个

<H1>David's Attendance: <span>Confirmed</span></H1> 

带有确认和拒绝单选按钮，这将改变跨度；再次单击该按钮，它将生成另一个

<H1>David's Attendance: <span>Confirmed</span></H1> 

带有确认和拒绝单选按钮，这将更改该跨度(而不是所有两个已生成的跨度)。

我知道很难理解我想说的话，但这里是 a visual example of JSFiddle that I got working.

谢谢大家的帮助!

Answer 1

首先，您应该注意，您尝试做的事情，即为元素分配动态标识符，是一种应该避免的反模式。

为了以更好的方式解决问题，请使用类和 DOM 遍历来根据已知的 HTML 结构查找相关元素，从而使您的代码保持干爽。

在您的特定情况下，您可以使用 closest() 获取包含的 div，然后使用 find() 获取 .attendance 元素，在根据所选单选按钮设置文本之前。试试这个:

$('.add_attr').click(function(e) {
  e.preventDefault();
  var newIndex = $('.attr_entry').length;
  $(".attr_entry:first").clone(true).removeClass('existent').insertAfter(".attr_entry:last").find('input[type="radio"]').prop('name', 'designator[' + newIndex + ']');
});

$('.remove_attr').click(function(e) {
  e.preventDefault();
  var $entry = $(this).closest('.attr_entry');
  if ($entry.hasClass('existent')) {
    alert('You can not remove the first attribute entry.');
  } else {
    $entry.remove();
  }
});

$('.radio').change(function() {
  var $attendance = $(this).closest('.attr_entry').find('.attendance');
  $attendance.text(this.value == '1' ? 'Confirmed' : 'Declined');
});

h1 {
  color: black;
  font-family: "Courier New", monospace;
  margin-left: -10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="attr_entry existent row">
  <div class="half">
    <h1>David's Attendence: <span class="attendance">Confirmed</span></h1>
    <p>
      <a href="#" class="add_attr"><i class="fa fa-plus-circle"></i> Add Another Attribute</a>
      <a href="#" class="remove_attr"><i class="fa fa-minus-circle"></i> Remove</a>
    </p>
  </div>
  <div class="half">
    <label>
  <input type="radio" name="designator[0]" id="radio1" checked="checked" value="1" class="radio"> Confirm
</label>
    <label>
  <input type="radio" name="designator[0]" value="0" class="radio"> Decline
</label>
  </div>
</div>