Question

我有一个部分加载并显示两条评论的代码。附加了另一个按钮More comments，它通过AJAX加载剩余的注释。然后将More comments替换为Less comments按钮。现在我想要的是，当点击较少的评论按钮时，评论应该被隐藏 Less comments按钮应替换为More comments按钮，可单击该按钮以显示隐藏的注释。它实际上会将Less comments按钮替换为预期的按钮，但它会将其与注释一起隐藏。

<div class='feeds'>
    <div class='comments'>
        <div class='comment_data>
      <div class = ' per_comment '>
        <p> slideToggle!</p>
      </div>
      <div class = 'per_comment '>
        <p> classToggle!</p>
      </div>
    <button class='morecomments ' value='7 ' name = 'more ' type='submit '>
     More comments</button>
    </div>
    </div>
</div>

通过AJAX获取更多评论的jQuery代码。这很好。

$(".morecomments").click(function () {
    var $this = $(this);
    var post_id = $(this).val();
    var user_id = $(".user_id").text();
    var request = $.ajax({
        url: "comments.php",
        type: "POST",
        data: {
            post: post_id,
            user: user_id
        },
        dataType: "html"
    });
    request.done(function (msg) {
        $this.prev('.per_comment').html(msg);
        $this.replaceWith("<button class='lesscomments' value='7' name = 'more' type='submit'>Less comments</button>");
    });
});

隐藏评论的jQuery代码。单击此按钮将隐藏注释，但replaceWith按钮也会消失：

$('.comment_data').on('click', ".lesscomments", function () {
    var $this = $(this);
    $this.closest('.comment_data').slideToggle();
    $this.replaceWith("<button class='morecomments' value='7' name = 'more' type='submit'>More comments</button>");
});

任何可行的解决方案都将受到极大的赞赏......

Answer 1

尝试

//use event delegation here also as the button is created dynamically
$(".comment_data").on('click', '.morecomments', function () {
    var $this = $(this),
        $pc = $this.prev('.per_comment');
    //if the comments are already loaded then don't load it again just display it
    if ($pc.data('loaded')) {
        $this.replaceWith("<button class='lesscomments' value='7' name = 'more' type='submit'>Less comments</button>");
        $pc.slideDown();
    } else {
        var post_id = $(this).val();
        var user_id = $(".user_id").text();
        var request = $.ajax({
            url: "comments.php",
            type: "POST",
            data: {
                post: post_id,
                user: user_id
            },
            dataType: "html"
        });
        request.done(function (msg) {
            $pc.html(msg).data('loaded', true);
            $this.replaceWith("<button class='lesscomments' value='7' name = 'more' type='submit'>Less comments</button>");
        });
    }
});
$('.comment_data').on('click', ".lesscomments", function () {
    var $this = $(this);
    $this.prev('.per_comment').slideUp();
    $this.replaceWith("<button class='morecomments' value='7' name = 'more'>More comments</button>");
});

Answer 2

您的按钮位于您隐藏的<div class='comment-data'>内。如果你在这个div之外移动按钮，它应该可以工作。

Answer 3

试试这个：

<强> Working Fiddle

HTML：

<div class="feeds">
    <div class="comments">
        <div class="comment_data">
            <div class="per_comment">
                <p>slideToggle!</p>
            </div>
            <div class="per_comment">
                <p>classToggle!</p>
            </div>
            <div class="per_comment comment">
                <p>slideToggle!</p>
            </div>
            <div class="per_comment comment">
                <p>slideToggle!</p>
            </div>
            <div class="per_comment comment">
                <p>slideToggle!</p>
            </div>
            <button class="morecomments showMoreLess" value="7" name="more" type="submit">More comments</button>
        </div>
    </div>
</div>

Jquery的：

$(document).on("click", ".showMoreLess", function () {
    if ($(this).hasClass("morecomments")) {
        $(this).html("Less Comment");
        $(this).removeClass("morecomments").addClass("lesscomments");
    } else {
        $(this).html("More Comment");
        $(this).removeClass("lesscomments").addClass("morecomments");
    }
    $('.comment').slideToggle();
});

在jQuery中切换Less / More按钮

3 个答案: