Question

当您单击文本时，我试图使某些文本出现。但是由于某种原因，getElementByClassName无法正常工作。不知道为什么可以肯定的是我没有看到它的一个小细节。目的是当您单击READ MORE（更多）时，出现文本，并且READ LESS（更少）将再次消失。它的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>

Answer 1

您有错字。

该函数称为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];

我强烈建议您查看控制台，以解决以后出现的此类错误

Answer 2

首先将函数称为TABLE1: ID municipalities county population website 1 Anson Somerset 2452 ansonmaine.town 2 Arrowsic Sagadahoc 440 arrowsic.org/recycling 3 Auburn Androscoggin 23000 auburnmaine.gov TABLE2: ID waste-ID munic-ID report-year tons cubic-yards dest-fac-ID origin 10 1 2 2017 59 Maine 11 20 2 2017 0 Maine 12 21 2 2017 0 Maine TABLE3: ID waste-ID munic-ID report-year tons cubic-yards dest-fac-ID origin 1 45 1 2017 594 0 Maine 2 28 1 2017 4 Maine 3 45 2 2017 121 Maine TABLE4: ID waste-ID munic-ID report-year tons cubic-yards dest-fac-ID origin 1 39 9 2017 280 Maine 2 39 12 2017 74 Maine 3 39 18 2017 3 Maine TABLE5: ID waste-ID munic-ID report-year tons cubic-yards dest-fac-ID origin 1 29 7 2017 10 0 Maine 4 7 12 2017 25 Maine 5 35 15 2017 208 Maine-这就是为什么它不起作用的原因，您在那里缺少了getElementsByClassName()。

所有这第二个都代表NodeList，因此要选择第一个元素，您必须使用

如果您需要按类别选择一个元素，则也可以使用var readMore = document.getElementsByClassName("read-more")[0];

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

2 个答案: