试图隐藏/显示基于PHP循环的DIV

Question

我有一个PHP循环，它返回一系列"talks"在会议议程中。每个演讲都有相关的描述。

我将代码粘贴在这里:https://pastebin.com/ckD380iN

<?php
$args = array('pagename' => 'agenda');
$agenda_page = new WP_Query($args);
if($agenda_page->have_posts()) : while($agenda_page->have_posts()) : $agenda_page->the_post();
?>
<section class="content">

<h3><?php the_field('agenda_list_title'); ?></h3>
<?php the_field('agenda_list_intro_paragraph'); ?>
<?php the_content(); ?>
<?php endwhile; endif; ?>

<ul class="event-list">
<?php
$agenda_posts = new WP_Query(array('post_type' => 'agenda', 'orderby' => 'post_date', 'order' => 'ASC'));
while ($agenda_posts->have_posts()) : $agenda_posts->the_post();
if( get_field('2021_agenda')) {
?>
<li class="event" id="agendastart">
<div class="event-time">
<?php
if (have_rows('time_begin')):
while (have_rows('time_begin')) : the_row();
$time = get_sub_field('time');
$time = ltrim($time, '0');
echo $time;
the_sub_field('am/pm');
endwhile;
endif;
echo ' ' . __('&ndash;') . ' ';
if (have_rows('time_end')):
while (have_rows('time_end')) : the_row();
$time = get_sub_field('time');
$time = ltrim($time, '0');
echo $time;
the_sub_field('am/pm');
endwhile;
endif;
?>
</div>
<?php edit_post_link('[Edit Event]', '<div class="edit-link">', '</div>'); ?>
<div class="indent">
<?php
$c = 0;
if (have_rows('talks')):
while (have_rows('talks')) : the_row();
$title = get_sub_field('title');
$subtitle = get_sub_field('subtitle');
$description = get_sub_field('description');
$i = get_the_id();
?>
<div class="pretitle"><?=$title;?></div>
<?php if ($subtitle) : ?>
<div class="event-title">
<?php $content = get_sub_field('description'); if ($content) : ?>
<?php echo $subtitle; ?>
<br><button onclick="myFunction(myDiv<?php echo $x; ?>)">More Details</button>
</div>
<div id="myDIV<?php echo $x; ?>"><?php $i++ ;?><?php echo $description; ?> <?php else: ?> <?php echo $subtitle; ?> <?php endif; ?> </div>
<?php endif; ?>
<ul class="speaker-list">

<?php
$speakers = get_sub_field('speakers');
if ($speakers) :
foreach ($speakers as $speaker) :
$label = '';
$mod = get_field('moderator', $speaker->ID);
$intr = get_field('intro_speaker', $speaker->ID);
if ($mod == true) :
$label = ' <span style="color:' . get_field('primary_branding_color', 'options') . '">(moderator)</span>';
endif;
if ($intr == true) :
$label = ' <span style="color: #35a6c4">(introduction)</span>';
endif;
?>
<li>
<a class='iframe' href="<?php echo get_permalink($speaker->ID); ?>"><?php echo get_the_title($speaker->ID); ?></a><?php echo $label; ?>
<?php the_field('job_title', $speaker->ID); ?>
</li>
<?php
endforeach;
endif; ?>
</ul>
<?php
$c++;
endwhile;
endif;
?>

</div>
</li>
<?php } endwhile; ?>
</ul>
</section>

第61-86行是相关的部分，从$c = 0;

我也有这个脚本:

[script>]
function myFunction(index) { 
var x = document.getElementById("myDIV"+index);
if (x.style.display === "block"){
x.style.display = "none"; 
} 
else { 
x.style.display = "block";
}
}
[/script]

页面呈现在这里:https://mitcfo.artisanovens.com/agendapage/

我希望得到的描述出现时，您单击更多的详细信息，但myDIV代码是不区分每个面板的描述。(在源代码中，它们都是myDIV，这是一个问题。)

我试图添加一个区分元素使每个DIV唯一，但没有成功。

有人能看出我做错了什么吗?

提前感谢。

Answer 1

有几点需要注意。首先，使用myFunction(myDiv<?php echo $x; ?>)(例如:myFunction(myDiv2336))，您将整个HTMLDivElement对象传递给函数。为什么不。

然后，在函数myFunction中，在var x = document.getElementById("myDIV"+index);级别，当您已经将整个对象传递给它时，您试图通过其id检索元素。(然后有一个输入错误myDiv与myDIV) .

如果你想保持这个策略，你必须修改你的函数为:

function myFunction(index) {
if (index.style.display == "block" || index.style.display == "") {
index.style.display = "none";
} else {
index.style.display = "block";
}
}

您可以在这里找到一个工作示例https://jsfiddle.net/j86a0g5z/

你也可以在调用myFunction(<?php echo $x;?>) (ex: myFunction(2336))函数时只传递id，然后用var x = document.getElementById("myDiv"+index)检索对象。注意myDiv的拼写;)