從 JQuery 到 JavaScript

Question

我有一個設置，您可以在其中單擊一個問題，然后在右側打開答案。 在以前的項目中，我會使用 JQuery 但這是第一個不可用的項目。

我的標記

<section class="solution-information">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <h3 class="solution-information__title">Your development finance questions, answered</h3>

                <div class="row">
                    {{-- First column --}}
                    <div class="col-12 col-lg-6">
                        <ul class="question-list">
                            <li class="question-list__question" id="question1">
                                What are the criteria to get a development finance loan?
                            </li>

                            <li class="question-list__question" id="question2">
                                What are the criteria to get a development finance loan?
                            </li>

                            <li class="question-list__question" id="question3">
                                What are the criteria to get a development finance loan?
                            </li>
                        </ul>
                    </div>

                    {{-- Second column --}}
                    <div class="col-12 col-lg-6">
                        <div class="question-list__answer d-none" id="answer1">
                            Nulla porttitor accumsan tincidunt. Vivamus suscipit tortor eget felis porttitor volutpat. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Cras ultricies ligula sed magna dictum porta. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Sed porttitor lectus nibh. Cras ultricies ligula sed magna dictum porta.
                        </div>

                        <div class="question-list__answer d-none" id="answer2">
                            Nulla porttitor accumsan tincidunt. Vivamus suscipit tortor eget felis porttitor volutpat. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Cras ultricies ligula sed magna dictum porta. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Sed porttitor lectus nibh. Cras ultricies ligula sed magna dictum porta.
                        </div>

                        <div class="question-list__answer d-none" id="answer3">
                            Nulla porttitor accumsan tincidunt. Vivamus suscipit tortor eget felis porttitor volutpat. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Cras ultricies ligula sed magna dictum porta. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Sed porttitor lectus nibh. Cras ultricies ligula sed magna dictum porta.
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

我的 JavaScript

<script>
    let question = document.getElementsByClassName('question-list__question');
    let answers = document.getElementsByClassName('question-list__answer');
    let counter;

    for(counter = 0; counter < question.length; counter++){
        question[counter].addEventListener('click', function() {
            this.classList.toggle('question-list__question--selected');

            let number = this.getAttribute("id").substr(this.getAttribute("id").length - 1);

            document.getElementById("answer" + number).classList.toggle('d-none');


        });
    }

</script>

目前，您可以單擊每個問題，一切都會打開。 有沒有辦法刪除對所有其他類的修改，以便一次只出現一個 div？

這是頁面本身

是否只是循環其他類並將它們設置回原來的狀態？

Answer 1

 function toggleSelected() { // this is what $('...').removeClass('...') does: for (let q of document.querySelectorAll('.question-list__question')) { q.classList.remove('question-list__question--selected'); } // this is what $('...').addClass('...') does: for (let a of document.querySelectorAll('.question-list__answer')) { a.classList.add('d-none'); } //...and now set up the style of *this* element: let num = this.getAttribute("id").slice(-1); this.classList.add('question-list__question--selected'); document.querySelector("#answer" + num).classList.remove('d-none'); } // this is what $('...').click(...) does: for (let q of document.querySelectorAll('.question-list__question')) { q.addEventListener('click', toggleSelected); }

 .question-list__question--selected { color: red; }.d-none { display: none; }

 {{-- First column --}} <ul class="question-list"> <li class="question-list__question" id="question1">Question 1</li> <li class="question-list__question" id="question2">Question 2</li> <li class="question-list__question" id="question3">Question 3</li> </ul> {{-- Second column --}} <div class="question-list__answer d-none" id="answer1">Answer 1</div> <div class="question-list__answer d-none" id="answer2">Answer 2</div> <div class="question-list__answer d-none" id="answer3">Answer 3</div>

顯然 jQuery 所做的不僅僅是圍繞所有內容進行循環，但在其核心，這就是它的作用。 它以與遍歷 1 元素列表（或 0 元素列表，這就是 jQuery 構造很少拋出錯誤，即使它們不匹配）相同的方式循環處理單個元素和元素組的方式來處理單個元素和元素組。

如果要處理多個元素，則需要自己編寫這些循環。