如何用JQuery以唯一的id/name来增加/追加单选按钮？

Question

我想要做的是用简单的“确认/拒绝”选项增加/追加单选按钮。从逻辑上讲，当我们追加或增加一个单选按钮时，单选按钮的ID和名称会改变。

那么我现在想弄清楚的是：当我们点击一​​个按钮，它会增加：

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

与确认和下降单选按钮，所以每当您选择是选项， 的<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>