在jQuery中切换少/多按钮

我有一个部分加载和显示两条注释的代码。另一个按钮，

More comments

被附加，它通过AJAX加载其余的注释。 然后将

更多注释

替换为

更少注释

按钮。现在我想要的是，当点击“减少评论”按钮时，评论应该被隐藏和删除 应将

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>

我们将非常感谢任何可行的解决方案……

试试看

//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>");
});

//在此处使用事件委派，因为按钮是动态创建的
$（“.comment_data”）.on（'click'，'.morecoments'，函数（）{
变量$this=$（this），
$pc=$this.prev（'.per_comment'）；
//如果已经加载了注释，则不要再加载它，只需显示它即可
如果（$pc.data（'loaded'））{
$this.替换为（“少评论”）；
$pc.slideDown（）；
}否则{
var post_id=$（this.val（）；
var user_id=$（“.user_id”）.text（）；
var请求=$.ajax({
url:“comments.php”，
类型：“POST”，
数据：{
post:post_id，
用户：用户id
},
数据类型：“html”
});
request.done（函数（msg）{
$pc.html（msg）.data（'loaded'，true）；
$this.替换为（“少评论”）；
});
}
});
$（'.comment_data'）。在（'click'，.lesscomments'，函数（）{
var$this=$（this）；
$this.prev（'.per_comment'）.slideUp（）；
$this.replace为（“更多评论”）；
});

试试看

//在此处使用事件委派，因为按钮是动态创建的
$（“.comment_data”）.on（'click'，'.morecoments'，函数（）{
变量$this=$（this），
$pc=$this.prev（'.per_comment'）；
//如果已经加载了注释，则不要再加载它，只需显示它即可
如果（$pc.data（'loaded'））{
$this.替换为（“少评论”）；
$pc.slideDown（）；
}否则{
var post_id=$（this.val（）；
var user_id=$（“.user_id”）.text（）；
var请求=$.ajax({
url:“comments.php”，
类型：“POST”，
数据：{
post:post_id，
用户：用户id
},
数据类型：“html”
});
request.done（函数（msg）{
$pc.html（msg）.data（'loaded'，true）；
$this.替换为（“少评论”）；
});
}
});
$（'.comment_data'）。在（'click'，.lesscomments'，函数（）{
var$this=$（this）；
$this.prev（'.per_comment'）.slideUp（）；
$this.replace为（“更多评论”）；
});

您的按钮位于要隐藏的

内。如果您将按钮移到该div之外，它应该可以工作。

您的按钮位于您要隐藏的

内。如果将按钮移到该div之外，它应该可以工作。

尝试以下操作：

HTML:

试试这个：

HTML:

---

小心点。。如果不是在。。浏览器默认行为应该做什么？小心点。。如果不是在。。浏览器默认行为应该做什么？它只替换按钮，它阻止AJAX加载更多的commnet。它只替换按钮，它阻止AJAX加载更多的commnet。

$('.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>");
});

//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>");
});

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

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