js中如何引用第一次出现的class

Question

我有一个 HTML 常见问题解答页面，看起来像这样：

<dl class="faq_simple ltr">
<dt id="kak-oformit-zakaz-na-sajte" class=""><span class="faq_question_simple_ltr">Toggle 1</span></dt>
<dd class="faq_answer_simple" style="display: none;">
    CONTENT
</dd>
</dl>

<dl class="faq_simple ltr">
    <dt id="kak-vybrat-tovar" class=""><span class="faq_question_simple_ltr">Toggle2</span>
    </dt>
    <dd class="faq_answer_simple" style="display: none;">
    CONTENT 2
    </dd>
</dl>

如您所见，我想要在点击时显示 <dd class="faq_answer_simple> 的跨度 class "faq_question_simple_ltr"。为此，我添加了一个 JS 函数：

 <script>
        $(document).ready(function () {
            $(".faq_question_simple_ltr").click(function(){
                $(".faq_answer_simple").toggle();
                })
        })
    </script>

它有效，但它打开了页面上的所有 "faq_answer_simple" 元素，我尝试将 :first-child 添加到 $(".faq_answer_simple:first-child").toggle();，但随后它完全停止工作。

你能帮我吗，当我点击一个给定的父 class 时，如何打开给定 class 的第一次出现，使用 js toggle();功能？

Answer 1

只需将这一行 $(".faq_answer_simple").toggle(); 替换为 $(this).toggle();

Answer 2

当您使用 $(".faq_answer_simple") 作为选择器时，您的实际代码指的是所有 .faq_answer_simple 元素。

您需要指向与被点击元素相同父级内的右侧.faq_answer_simple，您可以使用：

$(this).parent().parent().find(".faq_answer_simple").toggle();

演示：

$(document).ready(function() {
  $(".faq_question_simple_ltr").click(function() {
    $(this).parent().parent().find(".faq_answer_simple").toggle();
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<dl class="faq_simple ltr">
  <dt id="kak-oformit-zakaz-na-sajte" class=""><span class="faq_question_simple_ltr">Toggle 1</span></dt>
  <dd class="faq_answer_simple" style="display: none;">
    CONTENT
  </dd>
</dl>

<dl class="faq_simple ltr">
  <dt id="kak-vybrat-tovar" class=""><span class="faq_question_simple_ltr">Toggle2</span>
    </dt>
  <dd class="faq_answer_simple" style="display: none;">
    CONTENT 2
  </dd>
</dl>

Answer 3

与jQuery:

$('.faq_answer_simple')[0].toggle()

使用 es6:

let firstElem = document.querySelector('.faq_answer_simple')[0];
firstElem.style.display = firstElem.style.display == 'block' ? 'none' : 'block'

实际上 chŝdk 给出的更好，因为它不像这个那样硬编码。如果您总是只关心第一个 class 出现的情况。

js中如何引用第一次出现的class

How to reference the first occurence of the class in js

html

javascript

jquery

click

jquery-selectors