1

各日の下に項目がある 7 日間を含むカルーセルを作成しようとしています。次のボタンが押されると、jquery は form の最後の span 要素を探し<span class="date">DATE</span>、値を取得してサーバーに渡し、次の 3 つのエントリを取得します。これらのエントリは、<ul class="week">要素と 7 日間全体が右に 3 ずつスライドします。私の最初の問題は、最初のクリック後にjqueryが動的に生成されたコンテンツを表示していないようで、最初の日付値をサーバーに送信するだけで、これらの3つの日付が何度も繰り返されることです。2番目の問題は、十分な時間クリックした後、新しいコンテンツの生成を停止し、最後にコンテンツを追加できないことです.当時のサーバーはまだ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);

});

最初の問題は解決しました。サーバーから返されたデータには、日付の前後にスパン要素が含まれていませんでした。@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()また、とを使用して、1 つのカルーセルで作業し、ページから他の要素または要素を.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 に答える