Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

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编辑和克隆滑块

1 个答案: