显示更多/显示更少 Jquery 的问题答案

【问题标题】：Problems with a show more/show less Jquery显示更多/显示更少 Jquery 的问题
【发布时间】：2017-09-18 12:45:23
【问题描述】：

我在 cmets 上使用 show more/show less。目的显然是缩短和延长用户单击 jquery 的创建链接时创建的 cmets。

我遇到的问题是我有多个 cmets，而不是 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>")
            });

        });

【问题讨论】：

你应该使用每个函数，这里有一些文档api.jquery.com/jquery.each
问题是您使用的选择器会返回多个项目。当您有多个项目时，jQuery 函数的工作方式会有所不同，具体取决于函数 - 例如，.html() 将获取第一个元素的 html，而 .html(text) 将为所有元素设置 html。最简单的选择是有两个 div，一个是长的，一个是短的，然后切换它们。

标签： javascript jquery

【解决方案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)。你对每个函数都这样做。

【讨论】：

【解决方案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() 它只返回类的第一次出现。要遍历所有元素，您需要一个 each 函数。

【讨论】：