1

我正在尝试创建一个包含 7 天的轮播，其中每天都有项目。当按下下一个按钮时，jquery 查找表单的最后一个 span 元素，获取<span class="date">DATE</span>该值并将其传递给服务器以获取接下来的 3 个条目。然后将这些条目附加到<ul class="week">元素和整个 7 天向右滑动 3 个增量。我的第一个问题是在第一次点击之后 jquery 似乎没有看到动态生成的内容，只是将初始日期值发送到服务器，使其一遍又一遍地重复这 3 个日期。第二个问题是在单击足够长的时间后，它只是停止生成新内容并且无法将内容添加到最后，即使服务器仍然会在那些日子里吐出 html。我是这方面的初学者，可能没有最佳实践想通了。这是我的相关代码：

        $('.next').click( function() {
    var date = $(".date").filter(':last').text()  //grab the last date class and parse into url to send to server 
    $.get('/log_entries/ajaxdate/'+date, function(data) {
      $('.week').append(data);
    });
    $('.test').animate({left: '-=272px'}, 500);

});

好的第一个问题解决了，从服务器发回的数据不包含日期周围的 span 元素，日期现在正确增加感谢@RoccoC5

一旦我足够高，我仍然会随机用完条目，在这种情况下，从 2011 年 8 月 15 日开始是 2011 年 10 月 26 日。

以下是加载 log_entries/ajaxdate/2011-09-12 时从服务器发回的代码：

<li class = "entry"><span class="date">2011-09-13</span> 
</li> 
<li class = "entry"><span class="date">2011-09-14</span> 
</li> 
<li class = "entry"><span class="date">2011-09-15</span> 
</li>
4

1 回答 1

0

如果响应是纯 HTML，则应将其转换为 DOM 元素，使用$(data)：

$.get('/log_entries/ajaxdate/'+date, function(data) {
    $('.week').append($(data));
});

或使用innerHTML，只是一个例子：

var jweek = $('.week');
jweek.html(jweek.html() + data);

您还应该使用.closest()and.find()以确保您使用一个轮播而不是从页面中选择另一个.data或.next元素：

<div class="carousel">
    <ul class="week">
        <li class="entry"><span class="date">2011-08-16</span></li>
    </ul>
    <a href="..." class="next">Next</a>
</div>

$('.carousel .next').click( function() {
    // find the parent .week and then .date inside of it
    var date = $(this).closest('.week').find('.date:last').text();
    ...
 });

注意.filter(':last')可以压缩成前面的选择器。

于 2011-08-16T06:13:06.057 回答