当行数未知时,使用javascript为行更改类
每当我点击一行时,我希望有一个“弹出”div。我尝试用javascript来切换一个类。 我们正在用WordPress自定义帖子类型填充一个表,因此行数未知 id“bedrijfsinfo-x”被正确生成,并且函数对正确数量的行进行计数。它仍然会切换所有div上的类,而不仅仅是与我单击的行关联的类 任何帮助都将不胜感激当行数未知时,使用javascript为行更改类,javascript,jquery,wordpress,function,Javascript,Jquery,Wordpress,Function,每当我点击一行时,我希望有一个“弹出”div。我尝试用javascript来切换一个类。 我们正在用WordPress自定义帖子类型填充一个表,因此行数未知 id“bedrijfsinfo-x”被正确生成,并且函数对正确数量的行进行计数。它仍然会切换所有div上的类,而不仅仅是与我单击的行关联的类 任何帮助都将不胜感激 <?php $counter = 1 ; ?> <?php // Als er berichten zijn gevonden.
<?php $counter = 1 ; ?>
<?php
// Als er berichten zijn gevonden.
if ( $posts->have_posts() ) {
// While loop om alle berichten op te halen
while ( $posts->have_posts() ) :
$posts->the_post();
global $post;
?>
<tr id="su-post-<?php the_ID(); ?>" class="su-post contracten">
<td class="meta_data" onclick="showInfo()"><?php bedrijfsnaam(); ?></td>
<td><?php naam_contactpersoon(); ?></td>
<td><?php url(); ?></td>
<td><?php start(); ?></td>
<td><?php eind(); ?></td>
<td><?php frequentie(); ?></td>
<td><?php datum_onderhoud(); ?></td>
</tr>
<div id="bedrijfsinfo-<?php echo $counter?>" class="infobox">
<p>Bedrijfsinformatie<br><?php bedrijfsnaam() . url() . start() . eind(); ?></p>
<button onclick="showInfo()"><p class="button">Sluiten</p></button>
</div>
<?php $counter = $counter + 1; ?>
<?php endwhile; }
<script>
function showInfo() {
var tr_count = document.getElementsByTagName("tr").length;
for (var i = 1; i < tr_count; i++) {
var popup = document.getElementById("bedrijfsinfo-"+ i);
popup.classList.toggle("show");
}
}
</script>
您的showInfo
函数迭代整个行数。听起来这不是你想要的。也许可以试着输入被点击的东西的id
<td class="meta_data" onclick="showInfo(<?php $counter; ?>)"><?php bedrijfsnaam(); ?></td>
// ...
<button onclick="showInfo(<?php $counter; ?>)"><p class="button">Sluiten</p></button>
function showInfo(i) {
var popup = document.getElementById("bedrijfsinfo-"+ i);
popup.classList.toggle("show");
}