我有一个隐藏的 div，我想在按下按钮时显示它，因为 ACF 中继器正在重复它一次打开所有隐藏 div 的 id。
//This is inside a repeater field causing the #buy to repeat
<button id="button">
<img src="images/right-arrow.png" width="35" class="button__icon">
</button>
</div>
<div id="buy" style="display:none" class="tour-event__wrapper--hidden tour-event__wrapper--hidden-bottom">
<div class="widget-containter">
<?php the_sub_field('eventbrite_widget'); ?>
</div>
</div>
// JQuery
$('button').click(function () {
$( "#buy" ).slideToggle("slow");
});
我想我需要使用 .find() 或 .next() 找到 #buy 但是我没有太多运气使用它们。
可以在 ACF 中继器上获得唯一 ID，这应该可以解决您的问题：
<?php if(get_field('repeater_field_name')): $i = 0; ?>
<ul>
<?php while(has_sub_field('repeater_field_name')): $i++; ?>
<li class="section-<?php echo $i; ?>">
<button id="button<?php echo $i; ?>">
<img src="images/right-arrow.png" width="35" class="button__icon">
</button>
<div id="buy<?php echo $i; ?>" style="display:none" class="tour-event__wrapper--hidden tour-event__wrapper--hidden-bottom">
<div class="widget-containter">
<?php the_sub_field('eventbrite_widget'); ?>
</div>
</div>
</li>
<?php endwhile; ?>
</ul>
<?php endif; ?>
您的 jQuery 代码段将是
$('[id^=button]').click(function(evt) {
var buyId = evt.target.id.replace("button","buy");
$("#"+buyId).slideToggle("slow");
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句