该网站无法使用loadmore按钮

时间:2018-09-27 16:03:20

标签: javascript html css

我的LoadMore按钮具有以下代码:https://codepen.io/anon/pen/ZqzPaL

但是,当我将其放入网站时,它不再起作用。仅出现更多/更少按钮,但不再显示文本。

我需要说的是,我将该脚本放入了.js文件和HTML->

以下是使用ID和类的HTML代码。

$(document).ready(function () {
 size_p = $("#myList p").size();
 x=3;
 $('#myList p:lt('+x+')').show();
 $('#loadMore').click(function () {
 x= (x+3 <= size_p) ? x+3 : size_p;
 $('#myList p:lt('+x+')').show();
 });
 $('#showLess').click(function () {
 x=(x-3<0) ? 3 : x-3;
 $('#myList p').not(':lt('+x+')').hide();
 });
  
});
#myList p{ 
  display:none;
}
#loadMore {
 color:green;
 cursor:pointer;
 padding: 5px 15px;
 cursor: pointer;
 background: #e8e8e8;
 width: 75px;
 margin: 5px;
 position: relative;
 border-radius: 15px;
}
#loadMore:hover
#showLessa:hover
#showLess:hover
 {
 color:black;
}
#showLess {
 color:red;
 cursor:pointer;
 padding: 5px 15px;
 cursor: pointer;
 background: #e8e8e8;
 position: relative;
 border-radius: 15px;
 width: 75px;
 margin: 5px;
}
<div id="myList">
    						
    	<p>
    		Some text here.
    	</p>
    						
    	<p>
    		Second paragraph here.
    	</p>
    						
    	</div>
    	<div id="loadMore">Load more</div>
    	<div id="showLess">Show less</div>

我需要提到的是,段落也在其他类的其他div中。

1 个答案:

答案 0 :(得分:1)

  1. 您需要jquery

    https://code.jquery.com/

2。

.size()

已弃用

.length

不带括号!

3。 工作示例:     https://pastebin.com/Ck7CPfzq