2

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

这是 jsFiddle：http: //jsfiddle.net/W7w58/2/

单击 + 或 - 启动该功能。

这是代码，但我想在尝试 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);
}

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

4

2 回答 2

1

您的原始代码存在几个问题：

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

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

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

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

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);
    }

}

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>
于 2013-01-08T15:49:10.633 回答
0

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

  1. 您的<div>标签有一个id属性，该属性是唯一的。克隆它会创建两个相同的元素id，这会给你带来问题。请改用class属性。

  2. 您的事件处理程序没有考虑动态生成的元素。为此，您可以使用以下事件委托语法.on()：

    $('#closest_static_parent').on('click', '.btn-add', function() {

  3. $input是硬编码的。而不是$input，使用以下方法找到<input>相对于 的元素<a>：

    $(this).closest('input');
于 2013-01-08T14:25:22.743 回答