Question

我有滑块，让用户有机会选择时间范围。基于此时间范围，一些消息在屏幕上打印出一些风格。我有点为以下标签之间的消息生成样式。

                <section> .... </section>

当我更改确定新消息范围的滑块值时，新消息会落后于旧消息。我只是希望来自新范围的所有消息都不旧。你也可以看到我的代码的jsFiddle here

$(function() {
        $( "#slider-5" ).slider({
           range:true,
           min: parseInt(ctime[0]),
           max: parseInt(ctime[ctime.length-1]),
           values: [ parseInt(ctime[4]),parseInt(ctime[len])],

           change: function( event, ui ) {
              $( "#slidevalue" )
                 .val( formatDateTime(ui.values[ 0 ]) + " - " + formatDateTime(ui.values[ 1 ]) );

                 new_var=ui.values[0];

                 var body = document.getElementsByTagName('body')[0];
                 var section = document.createElement('section');
                 section.id = 'cd-timeline';
                 section.className = 'cd-container';
                 body.appendChild(section);

                 for (var x=0;parseInt(ctime[x])<ui.values[0];x++);

                 for (var x = 0;parseInt(ctime[x])<=ui.values[1]; x++) {
                     var datum = new Date(parseInt(ctime[x]));
                     var outerDiv = document.createElement('div');
                     outerDiv.className = 'cd-timeline-block';
                     section.appendChild(outerDiv);

                     var div = document.createElement('div');
                     div.className = 'cd-timeline-img cd-location';
                     outerDiv.appendChild(div);

                     var img = document.createElement('img');
                     img.src = 'img/cd-icon-location.svg';
                     img.setAttribute('alt', 'Location');
                     div.appendChild(img);

                     var div = document.createElement('div');
                     div.className = 'cd-timeline-content';
                     outerDiv.appendChild(div);

                     var h2 = document.createElement('h2');
                     div.appendChild(h2);
                     h2_text = document.createTextNode('foo');
                     h2.appendChild(h2_text);

                     var p = document.createElement('p');
                     div.appendChild(p);
                     p_text = document.createTextNode(<?php echo json_encode($content);                                           ?>[x]);
                     p.appendChild(p_text);

                     var span = document.createElement('span');
                     span.className = 'cd-date';
                     div.appendChild(span);
                     span_text = document.createTextNode(formatDateTime(datum));
                     span.appendChild(span_text);
                 }
           }
       });
     });

Answer 1

在将子元素附加到“部分”之前，您可以说

  $('section').children().remove();

摆脱'section'中的所有内容

这将包含您所在部分内的所有内容并将其删除。但要小心。如果您的部分中已有其他元素，那么这些元素也将被删除。如果你想避免这种情况。将您要添加的内容和要删除的内容放在与其他内容分开的元素中。

喜欢这个

<section>
    <div>
        //all your other content
    </div>

    <div id='sliderContent'>
        //all your slider content
     </div>
</section>

然后在你的jquery中使用

$('section #sliderContent').children().remove();

这将使你不必再将一个部分附加到dom

Answer 2

~~如果我理解正确，~~（它似乎是正确的评论）每次滑块都不需要追加新的<section>已更改（如果您正在执行此注释，则无法对多个元素使用相同的id ）。

<section>中的HTML，例如

<section id="cd-timeline" class="cd-container"></section>

然后您可以使用$('#cd-timeline').html();替换它的内容，如下所示：

$(function() {
    $( "#slider-5" ).slider({
       range:true,
       min: parseInt(ctime[0]),
       max: parseInt(ctime[ctime.length-1]),
       values: [ parseInt(ctime[4]),parseInt(ctime[len])],

       change: function( event, ui ) {
          $( "#slidevalue" )
             .val( formatDateTime(ui.values[ 0 ]) + " - " + formatDateTime(ui.values[ 1 ]) );

             new_var=ui.values[0];

             for (var x=0;parseInt(ctime[x])<ui.values[0];x++);

             for (var x = 0;parseInt(ctime[x])<=ui.values[1]; x++) {
                 var datum = new Date(parseInt(ctime[x]));
                 var outerDiv = document.createElement('div');
                 outerDiv.className = 'cd-timeline-block';
                 $('#cd-timeline').html(outerDiv); // replace the content of existing section

                 var div = document.createElement('div');
                 div.className = 'cd-timeline-img cd-location';
                 outerDiv.appendChild(div);

                 var img = document.createElement('img');
                 img.src = 'img/cd-icon-location.svg';
                 img.setAttribute('alt', 'Location');
                 div.appendChild(img);

                 var div = document.createElement('div');
                 div.className = 'cd-timeline-content';
                 outerDiv.appendChild(div);

                 var h2 = document.createElement('h2');
                 div.appendChild(h2);
                 h2_text = document.createTextNode('foo');
                 h2.appendChild(h2_text);

                 var p = document.createElement('p');
                 div.appendChild(p);
                 p_text = document.createTextNode(<?php echo json_encode($content);                                           ?>[x]);
                 p.appendChild(p_text);

                 var span = document.createElement('span');
                 span.className = 'cd-date';
                 div.appendChild(span);
                 span_text = document.createTextNode(formatDateTime(datum));
                 span.appendChild(span_text);
             }
       }
   });
 });

Answer 3

如何删除该部分：$("section").remove();
如何删除其子女：$("section").children().remove();

Javascript使用html擦除旧元素

3 个答案: