Question

所以我很抱歉标题太模糊了我甚至不确定如何用几句话来说出这个问题。

所以我有一个表单，用于向webstore添加项目。在该表格中可以选择添加不同品种的产品，例如不同尺寸或颜色的服装等......

我想只提供第一个onload的字段，然后有一个“添加”按钮，为每个其他所需品种显示一个额外的字段。

单击“添加”按钮后，旧的“添加”按钮将成为减法按钮，新的输入字段以及新的添加按钮将附加到上一个按钮。

我希望这个过程能够持续发挥作用。

添加第一个新字段时，该过程运行正常，但添加其他元素不能按预期工作。添加了新字段以及新添加按钮，但旧的添加按钮不会转换为减去按钮。我真的不确定这里的问题是什么。我不是一个jquery巫师。

以下是表格的相关部分：

<label for="varieties">Varieties</label><input type="text" name="varieties[]" id="varieties1" value="Default" /> <a href="#" class="add-variety"><img src="../img/plus.png" alt="Add" title="Add Another Variety" /></a><br />

这是我写的jquery：

    $('a.add-variety').click(function() {
    $(this).removeClass('add-variety');
    $(this).addClass('subtract-variety');
    $(this).append('<br /><input type="text" name="varieties[]" value="Default" /> <a href="#" class="add-variety"><img src="../img/plus.png" alt="Add" title="Add Another Variety" /></a>');
    $(this).children('img').attr('src','../img/minus.png');
    return false;
});

非常感谢您的帮助！

Answer 1

当加载页面时，您的“添加多样性”功能仅绑定到“.add-variety”元素一次。任何新创建的“添加种类”按钮都不会获得绑定到它们的任何代码，因为它们是在页面加载后创建的。您可能希望使用live函数而不是click。

正如您所指出的，另一个问题是，您在a元素中添加了额外的行，而不是之后的行。

我建议将整个内容包装在div标记中，以便您轻松访问每一行。这将允许您通过复制现有行的HTML来删除一些重复的代码，而不是在JavaScript代码中再次包含它。

这是我建议的版本：

<div>
     <label for="varieties">Varieties</label><input type="text" name="varieties[]" id="varieties1" value="Default" /> <a href="#" class="add-variety"><img src="../img/plus.png" alt="Add" title="Add Another Variety" /></a><br />
</div>

和jQuery：

$(function() {
    $('a.add-variety').live('click', function() {
        $(this).removeClass('add-variety');
        $(this).addClass('subtract-variety');

        var parent = $(this).parent();
        parent.after($('<div />').html(parent.html()));

        $('img', this).attr('src','../img/minus.png');
    });
});

我使用$(string, element)代替children来访问子图像 - 我不确定这是否有助于减去负图问题，但我发现了这一点表单似乎工作得更好，因为它包含元素的所有匹配子元素，而不仅仅是直接子元素。

Answer 2

抱歉，我还没有回复你的问题，但有一个问题让我感到烦恼......

“预先”减去按钮会不会更有意义？所以你的代码将是：

$('a.add-variety').click(function() {
$(this).prepend('<input type="text" name="varieties[]" value="Default" /> <a href="#" class="subtract-variety"><img src="../img/minus.png" alt="Reomve" title="Remove a Variety" /></a><br/>');

}）;

我认为你不会在这个jQuery块中'返回'任何东西。

Answer 3

$（this）.append表示要向当前元素的CONTENT追加内容（在本例中为）。

$（this）。以后可能是你要找的......

此外，添加到dom的新元素将不具有点击处理程序，因此您还必须将点击处理程序代码应用于新元素。

Answer 4

回答你的第二个问题：

您可以在'父级'级别执行操作：

$('a.add-variety').parent().click(function() {
    ...
});

jQuery追加html首先没有工作

4 个答案: