Javascript Jquery克隆和更新按钮图标

我觉得我忽略了一些非常简单的事情。我需要另一双眼睛。我花在这件事上的时间多得多

看看这把小提琴=>

为什么图标在添加超过一年后不会更新？ 我希望上面的一个永远是加号，象征着新的一年的到来，下面的一个永远是减号，象征着新的一年的到来。它对第一个有效，但只对第一个有效。我相信我有正确的选择器，因为每个按钮都正确激活了功能（控制台输出）

HTML 试试这个：-

而不是

var clone=$('div').first().clone(true),
            peroid=$('div').length;

请尝试以下操作：

$('#addYear').button({
    icons: {
        primary: 'ui-icon-circle-plus'
    }
}).on('click', function () {
    var clone = $(this).parent().clone(),
        peroid = $('div').length;

    clone.find('label').prop('for', 'year-' + peroid).end()
         .find('input').prop('id', 'year-' + peroid).end()
         .find('button').prop('id', 'id' + peroid).prop('title', 'Remove Year')
         .addClass('removeYear').find('span:first').addClass('ui-icon-circle-minus');

    clone.insertAfter('div:last');
});

$(document).on('click', 'div:not(":first") button', function () {
    $(this).closest('div').remove();
});

---

为什么不更新是什么意思？@j08691请看小提琴，以获得清晰的演示。点击按钮，它会添加另一个输入/标签/按钮组合。最后一个按钮上的图标从正变为负（删除）。这在第一次起作用，但在以后的任何时候它都只是一个加号。不确定这是否是问题的一部分，但您应该使用attr（）而不是prop（）（除了访问元素的ID，我认为两者可以互换）。@MattB。谢谢你，马特！我总是喜欢改进我的代码。但你是对的，这与我的问题无关。这几乎是可行的，但它无法保持逻辑顺序。注意，如果我点击按钮3次，并且有四年的时间，我希望id如下：id-3，id-2，id-1，id-4。您的答案将返回id-1、id-3、id-2、id-0。这会让用户感到困惑，因此我会认为这是不希望的。很抱歉，我不能接受这个答案，但我会给你一个+1。你甚至为我写了删除函数！太好了。我不喜欢这种直接针对span并添加所需类的方法，我觉得这应该通过

.button

来完成，但我无法反驳什么是有效的+1谢谢@matchew不客气，抱歉，老实说，到目前为止我还没有使用

按钮

方法，但我认为添加类比调用方法更有效。

var clone = $('div').last().clone(true),
         peroid = $('div').length;

var clone=$('div').first().clone(true),
            peroid=$('div').length;

$('#addYear').button({
    icons: {
        primary: 'ui-icon-circle-plus'
    }
}).on('click', function () {
    var clone = $(this).parent().clone(),
        peroid = $('div').length;

    clone.find('label').prop('for', 'year-' + peroid).end()
         .find('input').prop('id', 'year-' + peroid).end()
         .find('button').prop('id', 'id' + peroid).prop('title', 'Remove Year')
         .addClass('removeYear').find('span:first').addClass('ui-icon-circle-minus');

    clone.insertAfter('div:last');
});

$(document).on('click', 'div:not(":first") button', function () {
    $(this).closest('div').remove();
});