gpt4 book ai didi

javascript - 想知道为什么这个 jQuery 不起作用?

转载 作者:行者123 更新时间:2023-12-03 11:56:08 24 4
gpt4 key购买 nike

我将以下 jQuery 拼凑在一起,使 Accordion 效果发挥作用。这有效...

$("#FAQs .answer").hide();
$("#FAQs .close").hide();
$("#FAQs .open").show();

// Click the #Expand button to show and hide .answer
$('#Expand').click(function() {

if ($(this).text() === 'Minimise FAQs') {
$(this).text('Expand FAQs');
$('#FAQs .answer').slideUp('fast');
$("#FAQs .close").hide();
$("#FAQs .open").show();

} else {
$(this).text('Minimise FAQs');
$('#FAQs .answer').slideDown('fast');
$("#FAQs .close").show();
$("#FAQs .open").hide();

}
});

// Click the Quesiton (h2) to show and hide the answer
$("#FAQs h2").addClass("link").click(function() {
$(this).parent().children(".answer").slideToggle('fast');
$(this).parent('li').children(".close").toggle();
$(this).parent('li').children(".open").toggle();
});

此代码(上面)使以下 HTML 打开和关闭页面上的所有 Accordion :

<section class="row m_b_zero">
<div class="inner-container">
<div class="box">
<div class="box-inner"> <div class="faq-controls">
<span id="Expand">Expand FAQs</span>
</div></div>
</div>
</div>
</section>

这仍然很有效。

但是。

我需要使用 jQuery 将该 HTML 注入(inject)到页面中,因此我将其整合在一起:

$(function() {
$( 'section:nth-child(2)' ).after( '<section class="row m_b_zero"><div class="inner- container"><div class="box"><div class="box-inner"><div class="faq-controls"><span id="Expand">Expand FAQs</span></div></div></div></div></section>' );
});

这会在第二个 <section> 之后注入(inject)与之前相同的 Accordion Controller HTML标签。

这几乎可以工作。

HTML 已按预期注入(inject),但按钮不起作用?它不会打开和关闭 Accordion 。

我已确保将此 jQuery 放置在控制 Accordion 的 jQuery 之后,并且它位于页面就绪函数内。

有人知道为什么它不起作用吗?

最佳答案

您将相同的 id 赋予两个不同的元素。当您在 jQuery 中使用 id 选择器时,它仅返回具有该 id 的第一个元素。您应该改用类:

//HTML
<span class="Expand">Expand FAQs</span>

//JS
$('.Expand').click(function() {

此外,如果您要将它们动态添加到页面,您应该考虑 event delegation :

$(document).on("click", '.Expand', function() {

关于javascript - 想知道为什么这个 jQuery 不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25610318/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com