如何在 Jquery 中使用“for 循环”而不会出现这个错误？答案

【问题标题】：How can I use "for loops" in Jquery without this mistake?如何在 Jquery 中使用“for 循环”而不会出现这个错误？
【发布时间】：2016-10-04 01:52:00
【问题描述】：

问题来了：我有一个简单的无序列表的帖子。每个帖子都被截断（250 个字符），但点击时应该展开（使用 .replaceWith）。我想要做的是用“未截断”的 Post.content 替换截断的 Post.content。当我尝试这个时，单击会返回我列表中所有帖子的内容。我只想要我点击的帖子的内容。以下是相关代码：

<ul>

    {% for post in object_list %}<tr class="{% cycle 'row1' 'row2' %}"></tr>
        <div class="panel panel-default col-sm-offset-1 col-sm-8">
    <p><h4><B><a class="title" href="/posts/{{ post.id }}/">{{post.title }}</a></B></h4></p>  
                    <p style="color:gray">Author:
            <a style="color:darkgray" href="{% url 'accounts:profile' %}"> <span class="link">{{ user.first_name }} {{ user.last_name }}</span></a></p>
        <hr style="">
        <div class="post" >
            <h5 style="color: rgba(101, 106, 106, 1)">{{post.content|truncatechars:250 }}</h5>
        </div>
            <div class="expandContent">
            <button class="btn btn-primary btn-sm">Read</button>
            </div>
            <br>
        <br>
        <br>
        <div class="content">
            <p>{{ post.content }}</p>
        </div>
        </div>
        <br>

    {% endfor %}

</ul>

以上是我的基本清单。这是应该扩展 Post.content 的 JS：

<script src="{% static 'posts/jquery-3.1.1.js' %}"></script>
<script type="text/javascript">
$(".expandContent").click(function(){$(".post").replaceWith($('.content'));
});

</script>

如果有更多信息或代码有帮助，请告诉我。如果它完全相关，这个项目在 Django 1.10 上。谢谢！

【问题讨论】：

需要在点击回调函数中判断是点击了哪个.expandContent（提示，回调中是this），只展开对应的.post
@JaromandaX 谢谢！我将如何指定？我需要一个 ID 参数吗？
你可以用 id 做到这一点
@snit80 类似.expandContent(post_id)?
no - this.previousElementSibling 是您正在寻找的 .post - 而 this.nextElementSibling.nextElementSibling.nextElementSibling.nextElementSibling 是 .content - 使用 jQuery 可能有更简洁的方法，这就是文档的用途

标签： javascript jquery html django

【解决方案1】：

你可以这样做

<ul>

    {% for post in object_list %}<tr class="{% cycle 'row1' 'row2' %}"></tr>
        <div class="panel panel-default col-sm-offset-1 col-sm-8">
    <p><h4><B><a class="title" href="/posts/{{ post.id }}/">{{post.title }}</a></B></h4></p>  
                    <p style="color:gray">Author:
            <a style="color:darkgray" href="{% url 'accounts:profile' %}"> <span class="link">{{ user.first_name }} {{ user.last_name }}</span></a></p>
        <hr style="">
        <div class="post" >
            <h5 style="color: rgba(101, 106, 106, 1)">{{post.content|truncatechars:250 }}</h5>
        </div>
            <div class="expandContent">
            <button class="btn btn-primary btn-sm" onclick="replace("content-1">Read</button>
            </div>
            <br>
         <br>
        <br>
        <div class="content" id="content-1">
            <p>{{ post.content }}</p>
        </div>
        </div>
        <br>

    {% endfor %}

</ul>

在replace函数中可以getelementbyid并显示出来。

【讨论】：