Question

我有这个JSFiddle，当我多次点击添加按钮，并且编辑按钮超过两次时，滑块在编辑模式下没有显示正确的时间，并且双重克隆滑块，如何解决？

＆＃13;

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).closest('div').siblings().find('.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).closest('div').siblings().find('.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($('.slider').clone());
            rowTime.each(function() {
                $(this).html();
            });
        });

＆＃13;

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

＆＃13;

Answer 1

问题是，当您单击添加或编辑时，您正在向dom添加带有“slider”类的元素。这行代码$（'。slider'）。clone（）将克隆您添加的滑块，您只想克隆顶部的大滑块。

您需要在主滑块

中添加ID

rowTime.html($('#main-slider').clone());

并仅克隆那个

rowTime.each(function() {
   $(this).html();
});

这也什么都不做

{{1}}

在这里小提琴：http://jsfiddle.net/6oocxsmn/3/

jQuery避免双重克隆

1 个答案: