Question

使用jQuery，我想隐藏并显示ondiv上的多个div。我已经写了一些代码，但是没有用。

仅当我将所有div设置在新行时，我的JavaScript才起作用。但是我想一次选择多个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();
});

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

2 个答案: