我正在尝试使某个文本在您单击某个文本时出现。但由于某些原因,getElementByClassName无法工作。我也不知道原因?当然,这是我看不到的一个小细节。目标是当你点击阅读更多的时候,文本会出现,而阅读更少的文本会再次消失。其3个项目具有相同的文本
<ul class="item-list">
<!-- Item 1 Start-->
<li class="item item1">
<img src="images/chromebookpro.jpg">
<div class="item-text">
<h2>Google Pixelbook</h2>
<p class="pricing">Starting at $999</p>
<p>The first high performance Chromebook with Google Assistent built in. Features a four-in-one design offering laptop, tablet, tent, and entertainment modes, an all day battery with fast charging, a sleek aluminum body, and an optional pen. </p>
<p class="item-specs"> Key Specs</p>
<a href="#" onClick="change()" class="read-more">Read More</a>
<span style="display:none" class="read-less"> More Specs.<a href="" onClick="change()" >Read Less</a></span>
<div class="item-text-specs">
<div class="item-list">
<div class="article">12.3" Quad HD LCD</div>
<div class="article">Intel processor®</div>
</div>
<div class="item-list">
<div class="article">128/256/512 GB</div>
<div class="article">8/16 GB memory</div>
</div>
</div>
</div>
</li>
<!-- Item 1 End-->
</ul>
</div>
<script type="text/javascript">
var readMore = document.getElementByClassName("read-more");
var readLess = document.getElementByClassName('read-less');
function change() {
if (readLess.style.display == 'none') {
readMore.style.display = 'none';
readLess.style.display = 'block';
} else {
readMore.style.display = 'none';
}
}
</script>
发布于 2018-09-20 04:41:59
首先,这个函数名为getElementsByClassName()
--这就是它不能工作的原因,因为这里缺少一个s
。
第二,返回一个NodeList,所以要选择第一个元素,你必须使用
var readMore = document.getElementsByClassName("read-more")[0];
如果需要按类选择一个元素,也可以使用document.querySelector('.class');
https://stackoverflow.com/questions/52413807
复制相似问题