Question

我试图在Wordpress的高级自定义字段的帮助下创建动态jQuery函数。这可能与这个问题无关，但无论如何我使用这个插件在Wordpress中工作。

我的代码是这样的：

<div id="restaurangmeny">

<h2>Vår meny</h2>

<? if( get_field('meny_for_restaurangen') ): ?>
<?php while( has_sub_field('meny_for_restaurangen') ): ?>

<div class="kategori">

<div class="kategorinamn" id="<?php the_sub_field('namn_for_kategorin'); ?>"><?php the_sub_field('namn_for_kategorin'); ?></div>

<div class="matratter" id="<?php the_sub_field('namn_for_kategorin'); ?>">

<? if( get_sub_field('matratter') ): ?>
<?php while( has_sub_field('matratter') ): ?>

<div class="matratt">

<div class="left">
<div class="namn"><?php the_sub_field('namn_pa_matratt'); ?></div>
<div class="beskrivning"><?php the_sub_field('beskrivning_av_matratten'); ?></div>
</div>

<div class="pris"><?php the_sub_field('pris_pa_matratten'); ?>:-</div>

</div>

<?php endwhile; ?>
<?php endif; ?>

</div>

</div>

<?php endwhile; ?>
<?php endif; ?>

</div><!--#restaurangmeny-->

所以我想要的是当我点击名为“kategorinamn”的div时，我想将div称为“matratter”显示或隐藏。这就是为什么我使用相同的id为“kategorinamn”和“matratter”只是因为这两个属于一起。

简单地说，如果我点击1，我希望显示所有具有相同id（1）的内容。如果我点击2，我希望显示所有具有相同id（2）的内容。

我不知道这个叫做动态jQuery的是什么，但是我对jQuery很不好，所以这就是我要问的原因。

像这样的http://jsfiddle.net/gwK6d/18/，但只使用jQuery，这符合我上面的代码。

Answer 1

1）导入jquery

2）确保您没有为多个元素使用相同的ID

3）改变这一位：

<div class="kategorinamn" id="<?php the_sub_field('namn_for_kategorin'); ?>"><?php the_sub_field('namn_for_kategorin'); ?></div>
<div class="matratter" id="<?php the_sub_field('namn_for_kategorin'); ?>">

对此：

<div class="kategorinamn" id="<?php the_sub_field('namn_for_kategorin'); ?>">
    <?php the_sub_field('namn_for_kategorin'); ?>
    <div class="matratter" id="<?php the_sub_field('namn_for_kategorin'); ?>">
</div>

4）加载后声明此函数：

$(".kategorinamn").click(function(){
    $(this).children('.matratter').toggle();
});

JSFIDDLE：http://jsfiddle.net/uRpc8/

具有相同ID的动态jQuery

1 个答案: