添加和减去功能不克隆div的工作 - javascript

Question

所以我有一个窗体，用户可以在几分钟内添加或减少时间，他们也可以克隆该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); 
} 

我将不胜感激所有你可以给我的帮助:)。

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

Answer 2

你有几个问题在这里：

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

2. 您的事件处理程序未考虑动态生成的元素。要做到这一点，您使用的.on()事件代表团语法：

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

3. $input是硬编码。取而代之的$input，通过使用发现你<input>元素相对于<a>：

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