Question

所以我的问题是我有2个锚点，一个名为Add Spell，一个名为Add General Change，我希望一般更改输入在我的一般冠军名称输入后一个接一个地添加，如果你添加任何法术然后添加一般改变它将在该咒语之后追加。

以下是工作小提琴http://jsfiddle.net/e6y5903f/以及网页http://89.69.172.125/cms2.0/

最重要的代码

$('div#ChampionInput').on('click','a.AddGeneralChange', function(){
        $(this).parent().children().last().after(
           '<div class="GeneralChange">\
                <textarea type="text" size="20" name="GeneralChangeDescription['+$(this).parent('div').data('id')+'][]" placeholder="Enter General Change Description" />\
                <select name="GeneralChange['+$(this).parent('div').data('id')+'][]">\
                   <option value="buff">Buff</option>\
                   <option value="nerf">Nerf</option>\
                   <option value="new">New</option>\
                   <option value="change">Change</option>\
                   <option value="bugfix">Bugfix</option>\
                </select>\
                <a href="#" class="RemoveGeneralChange">Remove General Change</a>\
            </div>');
    });

上面的函数是给我带来麻烦的函数是$（this）.parent（）。children（）。last（）。after（部分我可能必须更具特异性。

    $('div#ChampionInput').on('click', 'a.RemoveGeneralChange',function(){
        $(this).closest('.GeneralChange').remove();
    });

还有一个小问题，你可以在网站上测试每个冠军有一个下拉列表，如果你有2个冠军，你将删除第一个下拉列表赢得不会出现在网站上的最后一个如果你再添加一个，它将再次开始工作，这是一个很棒的。

更新HTML

<a href="#" id="AddChampion">Add Champion</a>
<form name="second_form" id="second_form" method="POST">
    <div id="ChampionInput">
        <div class="GeneralChanges">
        </div>
        <div class="Spells">
        </div>
    </div>
    <br><br>
    <input type="submit" name="submit">
</form>

以及我在jquery中尝试过的内容

$('div#ChampionInput').on('click','a.AddGeneralChange', function(){
        $(this).parent('.GeneralChanges').append(
           '<div class="GeneralChange">\
                <textarea type="text" size="20" name="GeneralChangeDescription['+$(this).parent('div').data('id')+'][]" placeholder="Enter General Change Description" />\
                <select name="GeneralChange['+$(this).parent('div').data('id')+'][]">\
                   <option value="buff">Buff</option>\
                   <option value="nerf">Nerf</option>\
                   <option value="new">New</option>\
                   <option value="change">Change</option>\
                   <option value="bugfix">Bugfix</option>\
                </select>\
                <a href="#" class="RemoveGeneralChange">Remove General Change</a>\
            </div>');
    });

Answer 1

显而易见的解决方案是：

$('div#ChampionInput').on('click','a.AddGeneralChange', function(){
    $(this).parent().children('.GeneralChange').last().after(

这将选择具有类Champion的父级的最后一个子级（可能是GeneralChange）并在其后添加一个新元素。除此之外，仅当已存在GeneralChange元素时才有效。由于我们从没有开始，我们不能添加任何。我们可以像这样修理它：

$('div#ChampionInput').on('click','a.AddGeneralChange', function(){
    var elem = $(this).parent().children('.GeneralChange');
    if(elem.length == 0) {
        elem = $(this).parent().children();
    }
    elem.last().after(

但是Spell和GeneralChange的混合形式非常糟糕，可能会导致更多关于DOM操作的烦恼。它还需要更多逻辑来保持元素的顺序。

按顺序进行一点重组。我们从这里开始：

<div class="Champion">
  <div class="Spell"></div>
  <div class="GeneralChange"></div>
</div>

对此：

<div class="Champion">
    <div class="Spells">
        <div class="Spell"></div>
    </div>
    <div class="GeneralChanges">
        <div class="GeneralChange"></div>
    </div>
</div>

然后，我们不是针对特定类的最后一个子节点，而是针对它们应该进入的容器：

$('div#ChampionInput').on('click','a.AddGeneralChange', function(){
    $(this).parent().children('.GeneralChanges').first().append(

替代代码

$('div#ChampionInput').on('click','a.AddGeneralChange', function(){
    $(this).siblings('.GeneralChanges').first().append(

按正确的顺序将输入相互追加

1 个答案: