Question

我正在尝试创建一个包含每天7天项目的旋转木马。当按下下一个按钮时，jquery会查找格式为<span class="date">DATE</span>的最后一个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-10-26 2011-08-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>

Answer 1

如果响应是纯HTML，则应使用$(data)：

将其转换为DOM元素

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

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

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

您还应该使用.closest()和.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')可以压缩到上一个选择器中。

jquery无法看到为无限轮播生成的项目

1 个答案: