Question

我尝试做的是通过简单的＆＃34;确认/拒绝＆＃34;来增加/添加单选按钮。选项。从逻辑上讲，当我们追加或增加一个单选按钮时，单选按钮的ID和名称会发生变化。

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

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

带有确认和拒绝单选按钮，因此无论何时选择任一选项，＆lt; span＆gt;来自＆＃34;确认＆＃34;的更改到＆＃34;拒绝＆＃34;。那部分有效。

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

<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遍历来保持代码DRY，以便根据已知的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>

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

1 个答案: