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();
});

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

提前致谢，我们非常感谢您的帮助。

Answer 1

首先...... 因为你的id有[]字符，你需要逃避它才能在选择器中使用它 ...所以我认为如果你使用{{{ 1}} ..如果div总是在链接旁边

next()

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 %}

使用jQuery显示/隐藏特定div

3 个答案: