如何用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>