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

通过使用相对引用，我可以删除已添加到表单中特定部分内的列表中的项目。例如，通过添加需求，它可以从需求中删除。不同部分的相同功能 - jquery中的相对引用

我的问题是双重的：

添加到引用的项目把它添加到所有三类
当我尝试值添加到其他部分（资格），它说我输入的是空白。

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，所以我想知道这是可能的，因为我只设法让它在删除工作。

来源

2013-06-19 Jimmy

您必须使用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/

来源

2013-06-19 15:26:44 jantimon

玩弄这个例子，它仍然将这个项目添加到每个列表中，这是正确的吗？ – Jimmy

好吧，对不起，是一种痛苦，但现在它是一种角色颠倒，删除按钮不起作用。我不明白为什么 – Jimmy

这是因为我没有从delete回调中删除value_src：http://jsfiddle.net/9sX6X/65/ – jantimon

我建议在每个部分添加一个包装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不是作为你的代码现在。类似的方法也可以用于所有其他元素。

来源

2013-06-19 15:26:20

我有这么远与包裹部分，但是当我尝试把你的JavaScript代码失败。你能告诉我它应该去哪里吗？ http://jsfiddle.net/spadez/9sX6X/64/ – Jimmy

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

回答

相关问题