Jquery 加法和减法函数不适用于克隆的div'；s-javascript

所以我有一个表单，用户可以在几分钟内增加或减少时间，他们也可以克隆该div并添加更多值，但我的问题是，我似乎无法在克隆的div上使用该函数。该函数仅对第一个div进行加法或减法运算

下面是JSFIDLE：

单击+或-可启动该功能

下面是代码，但我想在尝试JSFIDLE时更容易理解问题：

HTML:

---

如果您能给我提供帮助，我将不胜感激：）

这里有几个问题：

您的

标记有一个

id

属性，该属性是唯一的。克隆它将创建两个具有相同

id

的元素，这将给您带来问题。改为使用

class

属性

事件处理程序没有考虑动态生成的元素。为此，您可以使用

.on（）

的事件委派语法：

$input

是硬编码的。使用以下命令查找与

相关的

元素，而不是

$input

：

$(this).closest('input');

---

原始代码的几个问题是：

不必要时使用数据属性

重复ID的使用

不处理文本框的新副本，而是修改原始文本框

隐藏问题：零填充 在您的代码中计算时间时出现了问题，导致时间只有 当使用单个文本框而不是一个文本框时，工作到0:08，然后返回到0:00。它是固定的，在我的解决方案中正常工作

下面是一个工作解决方案，其中时间增量和减量也适用于克隆，并且它们可以按照您的要求单独工作

这段代码还包括您在聊天中所说的内容—单击“减号”按钮时不要低于0:00（例如，它会生成警报）。希望有帮助

还包括：

JS代码：

$("#clone-btn").click(function () {
    var last = $('.cdiv').eq(-1);
    last.clone(true).insertAfter(last);
    return false;
});

function parseTimeString(str) {
    var time = str.split(":");
    if (time[1][0] === "0") {
        time[1] = time[1].substr(1, time[1].length);
    }

    return (parseInt(time[0]) * 60) + parseInt(time[1]);
}

$('.btn-add').on('click', function () {
    changeTime(1, this);
});

$('.btn-subtract').on('click', function () {
    changeTime(-1, this);
});
function changeTime(mins, el) {
    var inp = $(el).siblings('.btninp').eq(0).children('.input-field').eq(0);

    if (inp.val() == "0:00" && mins == "-1") {

        alert("time cannot be less than 0!");
    } else {

        var ps = parseTimeString(inp.val());

        var currentTime = parseInt(ps),
        newTime = currentTime + mins,
        minutes = (newTime % 60).toString(),
        hours = (Math.floor(newTime / 60)).toString();
        if (minutes.length < 2) {
            minutes = "0" + minutes;
        }

        inp.val(hours + ":" + minutes);
    }

}

$（“#克隆btn”）。单击（函数（）{
var last=$（'.cdiv'）.eq（-1）；
last.clone（true）.insertAfter（last）；
返回false；
});
函数parseTimeString（str）{
var time=str.split（“：”）；
如果（时间[1][0]=“0”）{
时间[1]=时间[1]。子字符串（1，时间[1]。长度）；
}
返回（parseInt（时间[0]）*60）+parseInt（时间[1]）；
}
$（'.btn add'）。在（'click'，函数（）{
变更时间（1，本）；
});
$（'.btn subtract'）。在（'click'，函数（）{
更改时间（-1，此值）；
});
功能更改时间（分钟，el）{
var inp=$（el）.同级（'.btninp'）.eq（0）.子级（'.input field'）.eq（0）；
如果（inp.val（）=“0:00”&&min==“1”）{
警报（“时间不能小于0！”）；
}否则{
var ps=parseTimeString（inp.val（））；
var currentTime=parseInt（ps），
新时间=当前时间+分钟，
分钟=（新时间%60）.toString（），
小时=（数学地板（newTime/60））.toString（）；
如果（分钟长度<2）{
分钟=“0”+分钟；
}
输入值（小时+“：”+分钟）；
}
}

HTML代码：

<button id="clone-btn">Clone</button>
<div class = "cdiv">
  <a href="#" class="btn btn-subtract">-</a>
  <a href="#" class="btninp"><input type="text" class="input-field" value="0:00"> </input></a>
   <a href="#" class="btn btn-add">+</a>
  </div>

克隆

我发现了你的问题，我正在为你制定精确的解决方案。几乎得到了完整的解决方案和解释。我有一个工作方案，它分别递增每个文本框，但我不确定你想用“时间”做什么。你能来聊一会儿吗？顺便说一句，如果出于某种原因，您希望每个克隆的文本框在0:00开始，而不是从上一个文本框中克隆的值开始，我在克隆btn函数的第3行之后添加了这行代码，也就是在创建克隆之后，新的代码行是：$（'.input field'）.eq（-1）.val（“0:00”）为了在最近克隆的输入框被创建后将其重置为0:00，JSFIDLE在这里：——希望所有这些都有帮助，并且编码愉快！我真是太感谢你了，工作得很有魅力。我真的很感激。谢谢，谢谢，谢谢！：）

$(this).closest('input');

$("#clone-btn").click(function () {
    var last = $('.cdiv').eq(-1);
    last.clone(true).insertAfter(last);
    return false;
});

function parseTimeString(str) {
    var time = str.split(":");
    if (time[1][0] === "0") {
        time[1] = time[1].substr(1, time[1].length);
    }

    return (parseInt(time[0]) * 60) + parseInt(time[1]);
}

$('.btn-add').on('click', function () {
    changeTime(1, this);
});

$('.btn-subtract').on('click', function () {
    changeTime(-1, this);
});
function changeTime(mins, el) {
    var inp = $(el).siblings('.btninp').eq(0).children('.input-field').eq(0);

    if (inp.val() == "0:00" && mins == "-1") {

        alert("time cannot be less than 0!");
    } else {

        var ps = parseTimeString(inp.val());

        var currentTime = parseInt(ps),
        newTime = currentTime + mins,
        minutes = (newTime % 60).toString(),
        hours = (Math.floor(newTime / 60)).toString();
        if (minutes.length < 2) {
            minutes = "0" + minutes;
        }

        inp.val(hours + ":" + minutes);
    }

}

<button id="clone-btn">Clone</button>
<div class = "cdiv">
  <a href="#" class="btn btn-subtract">-</a>
  <a href="#" class="btninp"><input type="text" class="input-field" value="0:00"> </input></a>
   <a href="#" class="btn btn-add">+</a>
  </div>