0

新しく作成された選択肢がいくつかのajaxコードとともにリストに追加されているページがあるので、ユーザーはページ全体を更新する必要はありません。リストには2つの列が含まれ、右側の列には「ending」と呼ばれるcssクラスが必要です。これにより、右側にフロートされ、右側のパディングもゼロになります。

問題は、新しい選択肢が追加されたときに、レンダリングされるパーシャルが、サイクル関数が機能する必要がある場合に複数の選択肢を調べていることです。

以下の私のコードを参照して、部分的に正しいcssクラスを挿入するようにコードを変更する方法について何か提案があれば教えてください。

部分的：

<% @tickets.each do |choice| %>
    <div id="<%= choice.id %>" class="<%= cycle("ticket shadow", "ticket shadow ending") %>" data-time="<%= choice.created_at.to_i %>">
<% end %>

VIEWのAJAX

<script type="text/javascript">
    var pusher = new Pusher('<%= Pusher.key %>'); // Replace with your app key
    var channel = pusher.subscribe('choices');

    channel.bind('created', function(data) {
        var after = $('.ticket:last').attr('data-time');

        var settings = { after: after}
        $.ajax({
            url: '/Home/Index',
            type: 'POST',
            dataType: 'json',
            data: settings,
            success: function (data) {
                $("#tickets").append(data.html);
                }
          });
        }

    );
</script>

編集：

私は以下を試してみましたが、それはうまくいくようですが、少しハッキーなようです..よりスムーズな解決策を持っている人はいますか？

if (css_end == "ticket shadow") {
  $(".ticket:last").addClass("ending");
}
4

1 に答える 1

2

ターゲットとするブラウザセットに応じて、CSS3クエリを使用して他のすべての要素をターゲットにすることをお勧めします。

.ticket:nth-child(2n+1) {
  float: right;
  padding-right: 0;
}

これはIE8では機能しませんが、他のほぼすべての主要なブラウザーで機能し、適切な動作を実現するために要素に特定のクラスを記述する必要はありません。セレクターは、nth-childすべての奇数の要素に単純に適用されます。

于 2012-10-20T08:22:46.213 に答える