javascript - 该网站无法使用加载更多按钮

Question

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

但是当我把它放在网站上时，它就不再起作用了。仅出现更多/更少按钮，但不再显示文本。

我需要说我把脚本放在文件 .js 和 HTML ->

这是使用 id 和 class 的 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 中。

标签： javascripthtmlcss

Answer 1

1. 你需要jquery

   https://code.jquery.com/

2.

.size()

不推荐使用

.length

没有大括号！

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