显示更多/显示更少的jQuery问题

Question

我在评论中使用显示更多/更少显示。 目的显然是要缩短和加长用户单击jquery的创建链接时所做的评论。

我遇到的问题是我有多个注释，而不是对从数据库返回的每个注释执行show more / less函数的jquery代码，它仅对从数据库带来的第一个注释执行它，然后自身重复并覆盖另一个注释图片。

此代码有什么问题，解决方法是什么？ HTML / PHP：

<p class="product-comment">$comments->comment</p>

jQuery的

  $(document).ready(function(){
            var showmoreHtml = $(".product-comment").html();
            var showlessHtml = showmoreHtml.substr(0,400);
            if(showmoreHtml.length > 400){
                $(".product-comment").html(showlessHtml).append("<a href='' class='product-comment-more'> (...Show More)</a>");
            }else{
                $(".product-comment").html(showmoreHtml);
            }
            $("body").on("click", ".product-comment-more", function(event){
                event.preventDefault();
                $(this).parent(".product-comment").html(showmoreHtml).append("<a href='' class='product-comment-less'> (Show less)</a>")
            });
            $("body").on("click", ".product-comment-less", function(event){
                event.preventDefault();

                $(this).parent(".product-comment").html(showmoreHtml.substr(0,400)).append("<a href='' class='product-comment-more'> (...Show More)</a>")
            });

        });

Answer 1

试试这个，我认为应该工作：+

已编辑

我已修复，现在应该可以工作了

<script type="text/javascript"> 
     $(document).ready(function(){

        $.each( $(".product-comment"), function( key, value ) {

            var showmoreHtml = $(this).html();
            var showlessHtml = showmoreHtml.substr(0,5);
            if(showmoreHtml.length > 5){
                $(this).html(showlessHtml).append("<a href='' class='product-comment-more'> (...Show More)</a>");
            }else{
                $(this).html(showmoreHtml);
            }
            $(this).on("click", ".product-comment-more", function(event){
                event.preventDefault();
                $(this).parent(".product-comment").html(showmoreHtml).append("<a href='' class='product-comment-less'> (Show less)</a>");
            });
            $(this).on("click", ".product-comment-less", function(event){
                event.preventDefault();
                $(this).parent(".product-comment").html(showmoreHtml.substr(0,5)).append("<a href='' class='product-comment-more'> (...Show More)</a>")
            });
        });

    });
</script>

要实现您想要的目标，您永远不必丢失参考$（this）。 您可以通过每个功能来做到这一点。

Answer 2

$(document).ready(function(){    
    $(".product-comment").each(function(){
        var showmoreHtml = $(this).html();
        var showlessHtml = showmoreHtml.substr(0,400);
        if(showmoreHtml.length > 400){
            $(this).html(showlessHtml).append("<a href='' class='product-comment-more' data-desc='" + showmoreHtml +"'> (...Show More)</a>");
        }else{
            $(this).html(showmoreHtml);
        }
    });
        $("body").on("click", ".product-comment-more", function(event){
            event.preventDefault();
            $(this).parent(".product-comment").html($(this).attr("data-desc")).append("<a href='' class='product-comment-less' data-desc='" + $(this).attr("data-desc")+"'> (Show less)</a>")
        });
        $("body").on("click", ".product-comment-less", function(event){
            event.preventDefault();

            $(this).parent(".product-comment").html($(this).attr("data-desc").substr(0,400)).append("<a href='' class='product-comment-more' data-desc='" + $(this).attr("data-desc")+"'> (...Show More)</a>")
        });
});

之所以采用最后一个是因为$（“。product-comment”）可能是QueryALLSelector，通过执行.html（）它仅返回该类的第一个匹配项。 要遍历所有元素，您需要一个功能。