时间戳

首页 > 解决方案 > 如何使用 getElementByClassName 使文本出现并重新出现在 Javascript 中？

javascript - 如何使用 getElementByClassName 使文本出现并重新出现在 Javascript 中？

问题描述

当您单击文本时，我正在尝试使某个文本出现。但是 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&reg;</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>

标签： javascriptcss

解决方案

你有一个错字。

该函数称为getElementsByClassName，请注意 S。它返回具有该类的元素的数组。

您可能会感到困惑，因为函数 getElementById 不是复数形式，因为 ID 都应该是唯一的，而类可以用于多个元素。

// Changed from getElement to getElements
// function will return an array, get the first element of that array
var readMore = document.getElementsByClassName("read-more")[0];
var readLess = document.getElementsByClassName('read-less')[0];

我强烈建议将来查看控制台以解决此类错误

推荐阅读