从 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 构造很少抛出错误，即使它们不匹配）相同的方式循环处理单个元素和元素组的方式来处理单个元素和元素组。

如果要处理多个元素，则需要自己编写这些循环。