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

debugcn 发表于 Dev

劳拉V6

使用 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.

瓦桑加7

这是将侦听器添加到 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();
});

告诉我它是否有效。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。