Javascript 具有相同ID的动态jQuery

我试图在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-->

Vår meny
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'); ?>">

jsIDLE:
id
值在DOM中必须是唯一的。重复使用相同的
id
是无效的标记，将导致未定义的行为。元素id是唯一的，使用重复的id是犯罪行为！说真的，使用类而不是ID。ID是唯一的，上面的php代码将使ID唯一。如果我在第一个循环中声明id为1，我可以在第二个循环中声明相同的id为2。我相信你的意思是。Kategorinam和。matratter，因为这些ID不存在？这将切换页面上的每个
.matratter
。我们可以看到，由于html包含在php
while
循环中，因此将有几个。使用
$（this）。next（“.matratter”）.toggle（）
，只针对相关内容。gilly3：我想这就是OP需要的内容—“简单地说，如果我单击1，我希望所有具有相同id（1）的内容都显示出来。”@Henric（OP）请提供您想要的详细信息。嗨。Kategorinam只是一个可以点击的类。我知道基本的jQuery，上面的函数不能解决我的问题。我上面的代码可以生成10个不同的.matratter，但是有一个uniqe id。这是一个循环，这就是为什么它应该动态工作的原因。否则我必须硬编码。。。
<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>

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