隐藏和显示多个div onclick jQuery - WordPress

Question

使用jQuery，我想在单击时隐藏和显示多个div。我写了一些代码，但它不工作。

我的JavaScript只有在我把所有的div都设置到一个新的行时才能工作。但是我想一次选择多个div，这样代码会更短。我尝试使用document.querySelectorAll一次选择多个div。但这也没有起到作用。因此，现在我尝试使用jQuery。

到目前为止，这是我的代码。但它不起作用。

$(document).ready(function(){
  $("#fm-button").click(function(){
    $("#first-image, #subtitle, #content").show();
    $("#content-1, #content-2, #subtitle-1, #subtitle-2, #second-image, #third-image").hide();
  });
});

这是HTML。我也在使用PHP。

<?php if(get_sub_field('FM_button_text') ) : ?>
    <div class="FM-button" id="fm-button" onclick="screenChangeFm()">
        <img class="FM-card-image" src="<?php the_sub_field('FM_image'); ?>" alt="feedmanagement_image">
        <p class="card-text"><span><?php the_sub_field("FM_button_text"); ?></span></p>
    </div>
<?php endif; ?>

<h2 class="sub" id="subtitle">Some Text 0</h2>
<h2 class="sub" id="subtitle-1" style="display: none">Some Text 1</h2>
<h2 class="sub" id="subtitle-2" style="display: none">Some Text 2</h2>

<img id="first-image" src="<?php the_sub_field('image-1'); ?>"alt="helpcenter_image">
<img id="second-image" src="<?php the_sub_field('image-2'); ?>" alt="helpcenter_image" style="display: none">
<img id="third-image" src="<?php the_sub_field('image-3'); ?>" alt="helpcenter_image" style="display: none">

<p id="content"><?php the_sub_field('content'); ?></p>
<p id="content-1" style="display: none">Subtext!</p>
<p id="content-2" style="display: none">Subtext! $#2</p>

I expect that when I click on #fm-button, some divs will hide and other will show.

Answer 1

这是向HTML对象添加侦听器的另一种方式。

$(document).on('click',"#fm-button",function(event){
    $("#first-image, #subtitle, #content").show();
    $("#content-1, #content-2, #subtitle-1, #subtitle-2, #second-image, #third-image").hide();
});

告诉我它能不能用。

Answer 2

@wasanga7我使用的是WordPress，而不是$，我需要使用jQuery。代码现在可以工作了！

jQuery(document).on('click',"#fm-button",function(event){
    jQuery("#first-image, #subtitle, #content").show();
    jQuery("#content-1, #content-2, #subtitle-1, #subtitle-2, #second-image, #third-image").hide();
});