2017-09-26 65 views
1

我想让阅读更多,阅读更少的按钮。一切都很工作,我总共有4个div,其中字符是有限的,字符也是有限的,甚至按钮工作正常,问题是按钮在某些div工作,而不工作在某些div,我不明白问题是什么 ?点击触发的按钮不工作,阅读更多,阅读更少的按钮

function limitCharacters(){ 
 
    $('.limit-characters').each(function(){ 
 
     var element = $(this); 
 
     // var element = $('.limit-characters'); 
 
     var elementHtml = element.html(); 
 
     element.prepend(elementHtml); 
 
     element.find("p:first").addClass("limited"); 
 
     element.find("p:last").addClass("unlimited hide-element"); 
 
     var limitedElement = element.find('.limited'); 
 
     var limitedElementString = limitedElement.text(); 
 
     var subStringedString = limitedElementString.substring(0,500); 
 
     limitedElement.html(subStringedString); 
 
     var buttonElement = '<a href="#" class="btn btn-sample3 btn-sm actionButton ">Read More</a>'; 
 
     element.append(buttonElement); 
 
     var button = $(".actionButton"); 
 
     button.click(function(e){ 
 
      $(this).parent().find(".unlimited").toggleClass("hide-element"); 
 
      $(this).parent().find(".limited").toggleClass("hide-element"); 
 
      $(this).toggleClass("read-less"); 
 
      if($(this).hasClass("read-less")){ 
 
       $(this).html("Read Less"); 
 
      }else{ 
 
       $(this).html("Read More"); 
 
      } 
 
      e.preventDefault(); 
 
     }); 
 
    }); 
 
}
.hide-element{ 
 
    display:none; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="limit-characters"> 
 
    <p> 
 
     Had best days of my life ever in Nepal. Wish you all a good time and hope to see you again in my next holiday and I promise to make longer holiday for best memories.Had best days of my life ever in Nepal. Wish you all a good time and hope to see you again in my next holiday and I promise to make longer holiday for best memories.Had best days of my life ever in Nepal. Wish you all a good time and hope to see you again in my next holiday and I promise to make longer holiday for best memories.Had best days of my life ever in Nepal. Wish you all a good time and hope to see you again in my next holiday and I promise to make longer holiday for best memories. 
 
    </p> 
 
</div>

回答

1

的问题是在var button = $(".actionButton");,则应该选择.actionButton那是你的element内。

var button = element.find(".actionButton");

相关问题