Question

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

我遇到的问题是我有多个注释而不是jquery代码执行显示更多/更少的功能从数据库返回的每个注释它只为它从数据库带来的第一个注释然后重复自己和覆盖其他图像。

此代码有什么问题？修复是什么？ HTML / PHP：

var uri = new Packages.com.mongodb.MongoClientURI("mongodb://usr:pwd@localhost:27017/admin");
var mongoClient = new Packages.com.mongodb.MongoClient(uri);
var database = mongoClient.getDatabase("mydb");
var collection = database.getCollection("mycollection");    
var personName = collection.find(com.mongodb.client.model.Filters.eq("person.‌id", id)).first().get("patient.first_name")

Jquery的

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

Answer 1

试试这个，我认为应该有效：+

<强> EDITED

我做了一个修复，现在应该工作

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

由于$（＆＃34; .product-comment＆＃34;）可能是一个QueryALLSelector，因为它执行.html（）它只返回类的第一次出现，因此它需要最后一个的原因。要遍历所有元素，您需要每个函数。

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

2 个答案: