Question

有人可以帮助纠正并向我解释为什么我的JS代码在显示更多文本和更少文本之间切换不起作用？我希望用户单击“显示更多”按钮以显示更多文本，并允许他们单击“显示更少”以返回到原始状态。

HTML

<div class="content-section">
    <h1>Our Team</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In sunt aut deleniti nihil quidem, maxime rem numquam ea quibusdam ut commodi hic fuga dolorum. Ab reprehenderit dolorem nemo error illo. Animi magni modi laudantium nisi eum cum sit minus. Repellat, esse nobis itaque ratione officia suscipit quo, saepe ipsam ab consequatur iusto commodi, quis praesentium aut consectetur sapiente officiis nesciunt quisquam velit magnam sequi nulla optio. Rem accusamus eum nam nobis officia? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem accusamus eum nam nobis officia?<a class="toggleButton" onclick="toggleText();" href="javascript:void(0);"> Show More </a>
        <p class="show-text"></p>
    </p>
</div>

JS

var status = "less"

function toggleText() {

    var introText = "Animi magni modi laudantium nisi eum cum sit minus. Repellat, esse nobis itaque ratione officia suscipit quo, saepe ipsam ab consequatur iusto commodi, quis praesentium aut consectetur sapiente officiis nesciunt quisquam velit magnam sequi nulla optio. Rem accusamus eum nam nobis officia?";

    if (status == "less") {
        document.getElementsbyClassName("show-text").innerHTML = introText;
        document.getElementsbyClassName("toggleButton").innerText = "Show Less"
        status = "more";
    } else if (status == "more") {
        document.getElementsbyClassName("show-text").innerHTML = "";
        document.getElementsbyClassName("toggleButton").innerText = "Show More";
        status = "less";
    }
}

Answer 1

有两个问题

错误getElementsbyClassName拼写错误，应为getElementsByClassName
getElementsByClassName使用索引器返回的给定集合中的访问元素。

Live Demo

var status = "less";

function toggleText() {

    var introText = "Animi magni modi laudantium nisi eum cum sit minus. Repellat, esse nobis itaque ratione officia suscipit quo, saepe ipsam ab consequatur iusto commodi, quis praesentium aut consectetur sapiente officiis nesciunt quisquam velit magnam sequi nulla optio. Rem accusamus eum nam nobis officia?";

    if (status == "less") {
        document.getElementsByClassName("show-text")[0].innerHTML = introText;
        document.getElementsByClassName("toggleButton")[0].innerText = "Show Less";
        status = "more";
    } else if (status == "more") {
        document.getElementsByClassName("show-text")[0].innerHTML = "";
        document.getElementsByClassName("toggleButton")[0].innerText = "Show More";
        status = "less";
    }
}

Answer 2

使用此功能正常。

<script type="text/javascript">
        var status = "less";
        var introText = "Animi magni modi laudantium nisi eum cum sit minus. Repellat, esse nobis itaque ratione officia suscipit quo, saepe ipsam ab consequatur iusto commodi, quis praesentium aut consectetur sapiente officiis nesciunt quisquam velit magnam sequi nulla optio. Rem accusamus eum nam nobis officia?";

        function toggleText()
        {
            if (status == "less") {
                document.getElementsByClassName("show-text")[0].innerHTML = introText;
                document.getElementsByClassName("toggleButton")[0].innerText = "Show Less"
                status = "more";
            }

            else if (status == "more") {
                document.getElementsByClassName("show-text")[0].innerHTML = "";
                document.getElementsByClassName("toggleButton")[0].innerText = "Show More";
                status = "less";
            }
        }
</script>

“显示更多”链接可将更多文字附加到页面？

2 个答案: