时间戳

首页 > 解决方案 > 当没有帖子时，为什么计数器在第 1 篇帖子中增加 n 次

jquery - 当没有帖子时，为什么计数器在第 1 篇帖子中增加 n 次

问题描述

    <html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
    <div class = "container">
        <div class = "main-comment">
            <textarea class = "textarea" rows = "5" cols = "35" placeholder = "Enter your comment ..."></textarea>
            <input type = "button" class = "btn btn-primary" id = "btn" value = "POST">
        </div>
        <div id = "comment_section">
        </div>
    </div>

    <script>
        var i = 0;
        var counter = 0;
        var current_selection = ' ';
        var template = '<div class = "comments" id = "%id%"><div class = "media"><div class = "media-body">             <p> %data% </p>         </div>          <div class = "media-footer" id="like_div">              <button class = "btn" id = "like">Like <span class = "glyphicon glyphicon-thumbs-up"></span> </button><span class = "counter"> 0 </span>                        <a>Comment</a>          </div>      </div></div>';

        $(document).ready(function(){

            $("#btn").click(function(){
                i++;
                var l = template.replace('%data%', $(".textarea").val()).replace('%id%', 'comment' + i);
                $(".textarea").val(' ');
                $("#comment_section").append(l);
                $("#like_div .btn").click(function(){
                    current_selection = $(this).parent().parent().parent().attr("id");
                    counter = parseInt($("#" + current_selection + " .counter").text());
                    counter = counter + 1;
                    $("#" + current_selection + " .counter").text(counter);
                });

            });
        });
    </script>
</body>
</html>

当有超过 1 个帖子时，就会出现问题。当有 2 个帖子时，第一个赞按钮的计数器会增加 2，很可能当有 3 个帖子时，第一个赞按钮的计数器会增加 3。

标签： jquery

解决方案

计数器会增加更多，因为您绑定的点击始终#like_div是具有该 ID 的第一个元素。由于您的模板具有此 ID，您将生成许多具有相同 ID 的元素，这是无效的 HTML。然后，单击处理程序将始终绑定到第一个匹配项。因此，您将让处理程序在第一个. #like_div

您的模板 HTML 中不应包含id属性，并且您的内部单击处理程序应仅绑定到本地按钮。因此，仅在添加的新部分中搜索它。

以下是它的工作原理：

var i = 0;
var counter = 0;
var current_selection = ' ';
var template = `<div class="comments">
        <div class = "media">
            <div class = "media-body">
                <p> %data% <\/p>
            <\/div>
            <div class = "media-footer like_div">
                <button class = "btn like">Like <span class = "glyphicon glyphicon-thumbs-up"><\/span><\/button>
                <span class = "counter"> 0 <\/span>
                <a>Comment<\/a>
            <\/div>
        <\/div>
    <\/div>`;

$(document).ready(function(){
    $("#btn").click(function(){
        var l = $(template.replace('%data%', $(".textarea").val())); // wrap in jQuery
        $("#comment_section").append(l);
        $(".textarea").val('');
        $(".like_div .btn", l).click(function(){ // only find the button within L
            var counterElem = $(this).closest(".comments").find(".counter");
            var counter = parseInt(counterElem.text());
            counterElem.text(counter + 1);
        });
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "container">
    <div class = "main-comment">
        <textarea class = "textarea" rows = "5" cols = "35" placeholder = "Enter your comment ..."></textarea>
        <input type = "button" class = "btn btn-primary" id="btn" value = "POST">
    </div>
    <div id = "comment_section">
    </div>
</div>

另请注意，您不需要为每个评论部分生成动态 ID。只需通过将模板字符串包装在 中来创建元素$()，您将获得对它的引用。无需使用动态id属性搜索。

推荐阅读