Question

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

单击+或 - 启动该功能。

这是代码，但我想在尝试使用jsFiddle时更容易理解这个问题：

HTML：

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

jQuery的：

/* for cloning */
$("#clone-btn").click(function() {
    $('#clone-div').clone(true).insertAfter('#clone-div');
    return false;
});


/* for the function */
var $input = $('.input-field');
$input.data('minutes', parseTimeString($input.val()));

function parseTimeString(str) {
    var time = str.split(":");
    return (parseInt(time[0])*60) + parseInt(time[1]);
}

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

$('.btn-subtract').on('click', function() {
    changeTime(-1);
});
function changeTime(mins) {
    var currentTime = parseInt($input.data('minutes')),
    newTime = currentTime + mins,
    minutes = (newTime % 60).toString(),
    hours = (Math.floor(newTime / 60)).toString();
    if (minutes.length === 0) {
        minutes = "00";
    } else if (minutes.length === 1) {
        minutes = "0" + minutes;
    }
    $input.data('minutes', newTime).val(hours + ":" + minutes);
}

我很感激你能给我的所有帮助:)。

Answer 1

原始代码的几个问题是：

在不必要的地方使用数据属性
使用重复的ids
不处理文本框的新副本，而是修改原始文本框。
隐藏问题：零填充在您的代码计算期间导致问题，导致时间只到工作到0:08然后在使用单个文本框而不是仅仅一个文本框时返回到0:00。它已修复并在我的解决方案中正常工作。

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

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

还有jsfiddle：http://jsfiddle.net/vwxfC/4/

JS CODE：

$("#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);
    }

}

HTML CODE：

<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>

Answer 2

你在这里遇到了一些问题：

您的<div>标记具有id属性，该属性应该是唯一的。克隆它将创建两个具有相同id的元素，这将导致您的问题。请改为使用class属性。
您的事件处理程序不考虑动态生成的元素。为此，您使用.on()的事件委派语法：
```
$('#closest_static_parent').on('click', '.btn-add', function() {
```
$input是硬编码的。而不是$input，使用以下内容找到相对于<input>的{{1}}元素：
```
<a>
```

添加和减去不适用于克隆div的函数--javascript

2 个答案: