Question

首先，我试图在点击的Javascript中使用html()替换div容器中的一些内容。使用这种方法的问题是它只将最后一个值放在数组中。

所以，我使用append()代替。但它不像我预期的那样有效。好吧，它确实在for循环中附加了文本，但是在点击之后，它只是附加内容而不删除像html()那样的先前内容。

以下是我如何实现它：

<div id="events-content"></div>

// using Responsive Calendar js

onMonthChange: function(events) {
    for (var eventsDate in options.events) {
        if (eventsDate.indexOf(monthKey) != -1) { 

            var monthEvents = options.events[eventsDate];

            for(i = 0; i < options.events[eventsDate].dayEvents.length; i++) {
                $('#events-content').append(
                    '<p><b>' + eventsDate + ':</b> ' +
                    monthEvents.dayEvents[i].name + '<br/></p>');
            }

        }
    }
},
...

如何使用Javascript替换上一个附加文本？

我在Responsive Calendar JS

中使用此功能

Answer 1

好吧，你可以这样做...... 准备循环中的所有标记。

 var html = "";
 for(i = 0; i < options.events[eventsDate].dayEvents.length; i++) {           
            html += '<p><b>' + eventsDate + ':</b> ' +
          monthEvents.dayEvents[i].name + '<br/></p>';
 }

 $('#events-content').html(html);

Answer 2

在for循环/追加机制之前清除html。

使用 .empty()

onMonthChange: function(events) {

    $('#events-content').empty()   //or $('#events-content').html('');

    for (var eventsDate in options.events) {
        if (eventsDate.indexOf(monthKey) != -1) { 

            var monthEvents = options.events[eventsDate];

            for(i = 0; i < options.events[eventsDate].dayEvents.length; i++) {
                $('#events-content').append(
                    '<p><b>' + eventsDate + ':</b> ' +
                    monthEvents.dayEvents[i].name + '<br/></p>');
            }

        }
    }
},

使用append（）不会替换以前的内容

2 个答案: