0

私は次の結果を達成しようとしています:

has_many の「タグ」を持つ carousel_images のモデルがあります。条件を満たしたカルーセルのみ画像を表示したい。さまざまなアプローチを試してみましたが、最も近いのは以下のコードですが、タグごとに 1 つだけではなく、タグごとに画像が表示されます。

<div class="span12">
    <div id ="myCarousel" class="carousel slide">
        <div class="carousel-inner">
            {% for caro in contents.caro_images %}
                {% assign first_loop = forloop.index0 %}                  
                {% for tag in caro.tags %}
                    {% if tag.tag_name|downcase contains page.slug %}
                        <div class="{% if first_loop%}active {% endif %}item">
                            <a href="{{ caro.url}}">
                                <img src="{{ caro.image.url }}" width="720" height="316" alt="">
                            </a>
                        </div>
                    {% endif %}
                {% endfor %}         
             {% endfor %}
             <a style="display:none;" class="left carousel-control" href="#myCarousel" data-slide="prev">‹&lt;/a>
             <a style="display:none;" class="right carousel-control" href="#myCarousel" data-slide="next">›&lt;/a>
        </div>
    </div>
</div>

内側のforループチェックタグ内に表示される実際の画像に関係していることはわかっていますが、そのループの外側でチェックを行い、画像を1回だけ表示する方法が本当にわかりません。

また、「アクティブ」クラスを適切に設定する方法も 100% わかりません。これは、2 次追加ループ内にネストされているためです。

前もって感謝します！

編集----これは作業コードです：

<div class="span12">
  <div id ="myCarousel" class="carousel slide">
    <div class="carousel-inner">
      {% for caro in contents.caro_images %}
      {% assign first_loop = forloop.index0 %}
        {% for tag in caro.tags %}
          {% if tag.tag_name == page.slug %}
            <div class="{% if first_loop == 0 %}active {% endif %}  item">
              <a href="{{ caro.url}}">
                <img src="{{ caro.image.url }}" width="720" height="316" alt="">
              </a>
            </div>
          {% endif %}
        {% endfor %} 
      {% endfor %}
      <a style="display:none;" class="left carousel-control" href="#myCarousel" data-slide="prev">‹&lt;/a>
      <a style="display:none;" class="right carousel-control" href="#myCarousel" data-slide="next">›&lt;/a>
    </div>
  </div>
</div>

エンドレスなアプリの再起動も、動作に貢献した可能性があると思います.

4

2 に答える 2

0

試行錯誤を重ねて構造を少し変更しましたが、最終的には機能するようになりました。他の誰かがこれに出くわした場合に備えて、更新されたコードは編集中です。

于 2013-07-12T22:08:43.893 に答える
-2

これは、JavaScript を使用してクライアント側で処理する方がよいと思います。多分これらのいくつかを見てください: 45+ カルーセル プラグイン.

于 2013-07-12T19:10:49.903 に答える