jQuery 编辑和克隆滑块

Question

我正在写一个jQuery滑块的克隆功能，从滑块添加新时间后，我想用编辑按钮更改时间，但是当我点击编辑时，滑块不能滑动，并且时间不对，滑块显示的是原来滑块的时间，不是我添加的时间，如何解决？

$('#slider').slider({
 range: true,
 min: 0,
 max: 1440,
 step: 60,
 values: [400, 920],
   
 slide: function (e, ui) {
  var hours1 = Math.floor(ui.values[0] / 60);
  var minutes1 = ui.values[0] - (hours1 * 60);

  if (hours1.length == 1) hours1 = '0' + hours1;
  if (minutes1.length == 1) minutes1 = '0' + minutes1;
  if (minutes1 == 0) minutes1 = '00';
  if (hours1 < 10) hours1 = '0' + hours1;
  if (hours1 == 24) {
   hours1 = "23";
   minutes1 = "59";
  }

  $('.time1').html(hours1 + ':' + minutes1);

  var hours2 = Math.floor(ui.values[1] / 60);
  var minutes2 = ui.values[1] - (hours2 * 60);

  if (hours2.length == 1) hours2 = '0' + hours2;
  if (minutes2.length == 1) minutes2 = '0' + minutes2;
  if (minutes2 == 0) minutes2 = '00';
  if (hours2 < 10) hours2 = '0' + hours2;
  if (hours2 == 24) {
   hours2 = "23";
   minutes2 = "59";
  }

  $('.time2').html(hours2 + ':' + minutes2);
 }
});

$('#add').click(function() {
    var Time = $('.time1').html() + ' - ' + $('.time2').html();
 
    var row = '<tr class="myRows">'
      + '<td class="rowTime">' + Time + '</td>'
   + '<td><div><button type="button" class="edit">Edit</button></div></td>'
   + '</tr>';

 $(row).insertAfter($("#form > tbody > tr:last"));
 $("#slider").slider('values', [400, 920]);
    $('.time1').text('07:00');
 $('.time2').text('15:00');
});

$('#form').on('click','.edit',function() {
 var $row = $(this).closest('tr');
    var rowTime = $row.find('.rowTime');
 var times = rowTime.text();
 rowTime.html($('#sliderTime').clone());
 rowTime.each(function() {
  $(this).html();
 });
});

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="sliderTime">
    <span class="time1">07:00</span> - <span class="time2">15:00</span>
 <br><br>
 <div id="slider"></div>
</div>
<br>
<div>
    <button type="button" id="add">Add</button>
</div>
<br>
<div>
<table id="form">
    <tbody>
     <tr>
   <th>Table Rules</th>
     </tr>
 </tbody>
</table>

Answer 1

使用下面的代码，它将按照您的要求正常工作:)。我正在做的是 wrapping the sliders inside an function 和 calling 它首先在 page load 上，然后当您 click on edit the function is being called again 和滑块再次执行 initialize :) 。函数调用：loadsliders();

loadslides();
function loadslides(){
var sliders = $('.slider');
sliders.each(function(){
    $(this).slider({
    range: true,
    min: 0,
    max: 1440,
    step: 60,
    values: [400, 920],

    slide: function (e, ui) {
        var hours1 = Math.floor(ui.values[0] / 60);
        var minutes1 = ui.values[0] - (hours1 * 60);

        if (hours1.length == 1) hours1 = '0' + hours1;
        if (minutes1.length == 1) minutes1 = '0' + minutes1;
        if (minutes1 == 0) minutes1 = '00';
        if (hours1 < 10) hours1 = '0' + hours1;
        if (hours1 == 24) {
            hours1 = "23";
            minutes1 = "59";
        }

        $(this).siblings('.time1').html(hours1 + ':' + minutes1);

        var hours2 = Math.floor(ui.values[1] / 60);
        var minutes2 = ui.values[1] - (hours2 * 60);

        if (hours2.length == 1) hours2 = '0' + hours2;
        if (minutes2.length == 1) minutes2 = '0' + minutes2;
        if (minutes2 == 0) minutes2 = '00';
        if (hours2 < 10) hours2 = '0' + hours2;
        if (hours2 == 24) {
            hours2 = "23";
            minutes2 = "59";
        }

        $(this).siblings('.time2').html(hours2 + ':' + minutes2);
    }
});
});
}
$('#add').click(function() {
    var Time = $('.time1').html() + ' - ' + $('.time2').html();

    var row = '<tr class="myRows">'
            + '<td class="rowTime">' + Time + '</td>'
            + '<td><div><button type="button" class="edit">Edit</button></div></td>'
            + '</tr>';

    $(row).insertAfter($("#form > tbody > tr:last"));
    $(".slider").slider('values', [400, 920]);
    $('.time1').text('07:00');
    $('.time2').text('15:00');
});

$('#form').on('click','.edit',function() {
    var $row = $(this).closest('tr');
    var rowTime = $row.find('.rowTime');
    var times = rowTime.text();
    rowTime.html($('.sliderTime').clone());
    loadslides();
    rowTime.each(function() {
        $(this).html();
    });
});

jsfiddle：

http://jsfiddle.net/0z25gqk9/1/

jsfiddle 在没有任何时间重置的情况下工作：

http://jsfiddle.net/0z25gqk9/2/

jQuery 编辑和克隆滑块

jQuery edit and clone slider

jquery

clone

slider