多模js + php
多模js + php
提问于 2020-03-09 22:49:32
我有灵活的内容，基于wordpress页面，这给我们的客户机会，以配置弹出在特定的页面由他自己。
所以问题是，在一个页面上，我们有相当多的内容，比如说无限行内容。
每个特定行都有一个由计数"$i++;“创建的唯一ID。
我正在尝试创建一个脚本，它将使我能够根据当前行数自动为唯一的灵活内容创建唯一的弹出窗口。
以下是PHP代码
<div class="row">
<?php if( have_rows('service_component') ): $i = 0; ?>
<?php while( have_rows('service_component') ): the_row(); $i++; ?>
<div class="six columns">
<img onclick="openRightMenu()" src="<?php the_sub_field("feature_image"); ?>">
<h3><?php the_sub_field("title"); ?></h3>
<div class="servicesHidden sidenav" id="right_slider_<?php echo $i; ?>">
<a href="javascript:void(0)" class="closebtn" onclick="closeRightMenu()">×</a>
<?php the_sub_field("services"); ?>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>上面的代码正常工作:生成了内容，每个div都是唯一的：
<div class="servicesHidden sidenav" id="right_slider_<?php echo $i; ?>">下一步是创建javascript。下面的代码也正常工作，但只有一个唯一的ID。
<script>
function openRightMenu() {
document.getElementById("right_slider_1").style.width = "33%";
document.getElementById("main").style.marginRight = "33%";
document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}
function closeRightMenu() {
document.getElementById("right_slider_1").style.width = "0";
document.getElementById("main").style.marginRight = "0";
document.body.style.backgroundColor = "white";
}
</script>的问题是:如何修改上面的函数，让它无休止地显示和隐藏唯一的内容？
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-03-09 23:03:48
您可以将id传递给函数。
function openRightMenu(id) {
document.getElementById(id).style.width = "33%";
...
}在你的html中
<img onclick="openRightMenu('right_slider_<?php echo $i; ?>')" src="<?php the_sub_field("feature_image"); ?>">页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60609355
复制相关文章
相似问题
腾讯云开发者
