不同部分的相同功能 - jquery中的相對引用

Question

通過使用相對引用，我可以刪除已添加到表單中特定部分內的列表中的項目。例如，通過添加需求，它可以從需求中刪除。

我的問題是雙重的：

1. 添加到引用的項目把它添加到所有三類
2. 當我嘗試值添加到其他部分（資格），它說我輸入的是空白。

http://jsfiddle.net/spadez/9sX6X/60/

var container = $('.copies'), 
    value_src = $('#current'), 
    maxFields = 10, 
    currentFields = 1; 

$('.form').on('click', '.add', function() { 
     value_src.focus(); 
    if ($.trim(value_src.val()) != '') { 
     if (currentFields < maxFields) { 
      var value = value_src.val(); 
      var html = '<div class="line">' + 
       '<input id="accepted" type="text" value="' + value + '" />' + 
       '<input type="button" value="X" class="remove" />' + 
       '</div>'; 

      $(html).appendTo(container); 
      value_src.val(''); 
      currentFields++; 
     } else { 
      alert("You tried to add a field when there are already " + maxFields); 
     } 
    } else { 
     alert("You didn't enter anything"); 
    } 

}) 
    .on('click', '.remove', function() { 
     value_src.focus(); 
    $(this).parents('.line').remove(); 
    currentFields--; 
}); 

是否有可能如「母體」例如修改此代碼不重複它的每個部分中，通過使用相對的引用。我想爲所有三個部分使用相同的腳本，但它有它，因此每個列表都是獨立的。

我是新來的JavaScript，所以我想知道這是可能的，因爲我只設法讓它在刪除工作。

Answer 1

您必須使用this才能獲取當前元素。在你的情況下，this指的是被點擊的按鈕。
下一步是獲取屬於按鈕的輸入框。例如。 $(this).prev();就像這個例子：

$('.form').on('click', '.add', function() { 
    var value_src = $(this).prev(); 

http://jsfiddle.net/9sX6X/62/

同樣也是你的附加部件如此。你正在將你的html附加到匹配$('.copies')的所有三個元素。相反，你必須嘗試從this到那裏。

$('.form').on('click', '.add', function() { 
    var value_src = $(this).prev(); 
    var copies = $(this).parent().prev(); 

http://jsfiddle.net/9sX6X/63/

Answer 2

我建議在每個部分添加一個包裝div。

<div class="section"> 
    <h4>Requirements</h4> 
    <div class="copies"></div> 
    <div class="line"> 
     <input id="current" type="text" name="content" placeholder="Requirement" /> 
     <input type="button" value="Add" class="add" /> 
    </div> 
</div> 

然後，你可以這樣做：

var $section = $(this).closest(".section"); 

$(html).appendTo($section.find(".copies")); 

這將增加只是相關.copies元素的所有.copies不是作爲你的代碼現在。類似的方法也可以用於所有其他元素。