具有相同 ID 的动态 jQuery

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 时，我希望显示或隐藏名为“matratter”的 div。这就是为什么我对“kategorinamn”和“matratter”使用相同的 id 只是因为这两个属于一起。

简单地说，如果我单击 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/