使用 jQuery 显示/隐藏特定的 div

Question

我在树枝模板中使用 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]。这是查询代码：

jquery：

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

但是当我点击链接时，它在页面上没有做任何事情（但是url上没有出现#，所以我猜对jquery函数的调用是好的）。我不太擅长 jQuery，所以也许我错过了一些非常明显的东西，或者是一种更简单的方法。

提前致谢，我们将不胜感激。

Answer 1

首先...因为你的 id 有[] 字符，你需要转义它才能在选择器中使用它...所以我认为如果你使用next() 会更好。 . 如果 div 总是在链接旁边

$(function(){  //document.ready function 
  $('.lien-reponse').click(function(event) {
     $(this).next().show('slow');  // OR $(this).next('div').show('slow');
     event.preventDefault();
  });
});

Answer 2

您不需要跟踪所有这些 id。请改用 DOM。

$('.lien-reponse').click(function(event) {
    $(this).next("div").toggle();
}

Answer 3

如果您使用 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 %}