0

小枝テンプレートでjQueryを使用して、特定のdivを表示または非表示にしています。コンテキストを説明するために、コメント領域があり、ユーザーが特定のリンクをクリックしたときにコメント用のフォームを表示したいだけです。ただし、これらの div は「for」ループを介して生成されます (各コメントには、この特定のコメントに回答するためのリンクがあるため)。次に、各回答 div とそれぞれのリンクに特定の ID を設定する必要があります。これを行うのはそれほど難しくないように見えますが、私は立ち往生していて、その理由が本当にわかりません...明確であるかどうかわからないので、ここに私のコードがあります:

小枝：

{% for commentaire in article.commentaires %}
<div>
    // display comment

    {% for reponse in commentaire.reponses %}
        // display answer
    {% endfor %}

        <a id="lien-reponse[{{ commentaire.id }}]" class="lien-reponse" href="#">Répondre au commentaire</a>
        <div id="div-lien-reponse[{{ commentaire.id }}]" style="display:none">
            // form to answer the comment
        </div>
</div>
{% endfor %}

このコードでは、ユーザーがリンク #lien-reponse[xx] をクリックしたときに div #div-lien-reponse[xx] を表示したいと考えています。クエリコードは次のとおりです。

Jクエリ:

$('.lien-reponse').click(function(event) {
 var id = $(this).attr("id");
 $('#'+id).hide();
 $('#div-'+id).show("slow");
 event.preventDefault();
});

しかし、リンクをクリックしても、ページでは何もしません (ただし、URL に # が表示されないので、jquery 関数の呼び出しは適切だと思います)。私はjQueryがあまり得意ではないので、おそらく本当に明白なこと、またはそれを行うためのより簡単な方法が欠けています。

あらかじめご了承ください。ご協力をお願いいたします。

4

3 に答える 3

0

Symfony2 と Twig を使用している場合は、スクリプトが jQuery の後に呼び出されるようにしてください。

{% block javascripts %}
    <script src='http://code.jquery.com/jquery-latest.min.js'></script>
    <!--<script src='{{ asset('bundles/yourbundle/js/jquery-1.9.1.min.js') }}'></script>-->
    <script>
        $(document).ready(function ($) {
            $(document).on('click', '.lien-reponse', function(event) { // equivalent to $('.lien-reponse').click()
                event.preventDefault();
                $(this).hide();
                $(this).next().show('slow');
                // You can also chain your jQuery dom manipulation:
                // $(this).hide().next().show('slow');
            });
        });
    </script>
{% endblock %}
于 2013-04-16T09:57:02.333 に答える
0

まず第一に...あなたのIDには[]文字があるので、それをセレクターで使用するにはそれをエスケープする必要があります...だから、..を使用する方が良いと思いますnext()..divが常にリンクの隣にある場合

$(function(){  //document.ready function 
  $('.lien-reponse').click(function(event) {
     $(this).next().show('slow');  // OR $(this).next('div').show('slow');
     event.preventDefault();
  });
});
于 2013-04-16T09:51:20.917 に答える