从JQuery到JavaScript

我有一个设置，你点击一个问题，答案在右边打开。在以前的项目中，我会使用JQuery，但这是第一个没有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>

您的发展金融问题，请回答
{{--第一列--}


获得发展融资贷款的标准是什么？


获得发展融资贷款的标准是什么？


获得发展融资贷款的标准是什么？


{{--第二列--}
无门，无门，无门，无门。维瓦摩斯寄托着猫的身体。前庭ac直径位于车辆部件的两侧。莫里斯·布兰迪是一位杰出的艺术家，他是一位杰出的艺术家。马萨是一位杰出的智者，康瓦利斯是一位佩伦特式的nec，埃吉斯塔是一位非nisi。乌尔里西斯·利古拉是一位伟大的政治家。前庭ac直径位于车辆部件的两侧。我是波特提托·莱克图斯·尼布。乌尔里西斯·利古拉是一位伟大的政治家。
无门，无门，无门，无门。维瓦摩斯寄托着猫的身体。前庭ac直径位于车辆部件的两侧。莫里斯·布兰迪是一位杰出的艺术家，他是一位杰出的艺术家。马萨是一位杰出的智者，康瓦利斯是一位佩伦特式的nec，埃吉斯塔是一位非nisi。乌尔里西斯·利古拉是一位伟大的政治家。前庭ac直径位于车辆部件的两侧。我是波特提托·莱克图斯·尼布。乌尔里西斯·利古拉是一位伟大的政治家。
无门，无门，无门，无门。维瓦摩斯寄托着猫的身体。前庭ac直径位于车辆部件的两侧。莫里斯·布兰迪是一位杰出的艺术家，他是一位杰出的艺术家。马萨是一位杰出的智者，康瓦利斯是一位佩伦特式的nec，埃吉斯塔是一位非nisi。乌尔里西斯·利古拉是一位伟大的政治家。前庭ac直径位于车辆部件的两侧。我是波特提托·莱克图斯·尼布。乌尔里西斯·利古拉是一位伟大的政治家。

我的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>

让question=document.getElementsByClassName（'question-list__-question'）；
让answers=document.getElementsByClassName（'question-list__-answer'）；
让我们来反击；
用于（计数器=0；计数器

此时，您可以单击每个问题并打开所有内容。是否有办法删除对所有其他类的修改，以便一次只显示一个div

这是页面本身

这是一个循环其他类并将它们设置回原来状态的情况吗？

function toggleSelected（）{
//这就是$（“…”）。removeClass（“…”）所做的：
for（让q为document.querySelectorAll（'.question-list\uuu-question'））{
q、 classList.remove（'question-list__-question--selected'）；
}
//这就是$（“…”）.addClass（“…”）所做的：
for（让一个document.querySelectorAll（'.question-list\uu-answer'））{
a、 类列表。添加（'d-none'）；
}
//…现在设置*此*元素的样式：
让num=this.getAttribute（“id”）.slice（-1）；
this.classList.add（'question-list\uu question--selected'）；
document.querySelector（“#answer”+num）.classList.remove（'d-none'）；
}
//这就是$（“…”）。单击（…）可以：
for（让q为document.querySelectorAll（'.question-list\uuu-question'））{
q、 addEventListener（'click'，toggleSelected）；
}

.question-list\u问题-已选择{
颜色：红色；
}
d-无{
显示：无；
}

{{--第一列--}

问题1
问题2
问题3

{{--第二列--}
答复1
答复2
答案3

“从JQuery转到JavaScript”您将从JQuery转到JavaScript。您的jQuery（DOM库）代码已经用JavaScript（语言）编写。“现在您可以单击每个问题并打开所有内容。是否有方法删除对所有其他类的修改，以便一次只显示一个div？”您是什么意思？您试图重新创建jQuery的哪些功能？是

$（“问题列表\答案”）.addClass（“d-none”）$（#answer“+number）。removeClass（“d-none”）

或其他一些不同的东西？尽管听起来很愚蠢，但我总是忘记你可以使用函数来包含事物（就像其他语言一样）。