show more/show less Jquery

Question

나는 쇼를 더 많이 사용하고 있습니다/코멘트를 적게 표시하고 있습니다. 목표는 분명히 사용자가 jquery에 대한 링크를 생성 할 때 발생하는 주석을 줄이고 길게 만드는 것입니다.

문제 나는 여러 주석을 가지고 있고 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>") 
     }); 
}); 

그것이 $ 때문입니다 마지막 걸리는 이유 (". 제품 코멘트")는이 클래스의를 선두를 반환()을 들이게 수행하여 QueryALLSelector을 할 수있다. 모든 요소를 ​​검토하려면 각 기능이 필요합니다.