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

Posted 2023-05-09

【中文标题】js中如何引用类的第一次出现

【英文标题】：How to reference the first occurence of the class in js

【发布时间】：2019-05-19 19:12:56

【问题描述】：

我有一个常见问题页面的 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>

如您所见，我有跨度类“faq_question_simple_ltr”，我想在点击时显示<dd class="faq_answer_simple>。为此，我添加了一个 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();，但随后它完全停止工作。

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

【参考方案1】：

当您使用$(".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>

【讨论】：

你太棒了！完美运行。但我不明白你是如何引用第一次出现的，如果你能解释一下那就太好了。任何方式都非常感谢你。

@Undry 在点击事件回调函数中$(this)会引用被点击的元素，所以要指向正确的元素我们需要向上移动到父元素faq_simple这样我才能找到@ 987654329@。这就是我使用.parent().parent()的原因。

为什么需要 2 个 .parent()，其中一个不起作用 :)

因为被点击的span 位于dt 内部，而dt 也在另一个dl 内部，所以我们需要两个.parent() 调用才能到达第一个带有.faq_answer_simple 的公共父级dlelmeent.

chŝdk 非常感谢您，您花时间解释可能对您来说显而易见的事情，再次感谢您。你帮了很多忙。

【参考方案2】：

使用 jQuery：

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

使用 es6：

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

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

【参考方案3】：

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

【讨论】：

不，它不起作用，因为我正在单击具有特定类的一个元素 并希望显示另一个具有隐藏状态的隐藏元素 。如果我使用你所说的，它会隐藏我点击的元素。