尝试 hide/show div 但是 .slideToggle() 应用于页面上的所有 divs - 高级自定义字段转发器

Question

我有一个隐藏的 div，我想在按下按钮时显示它，但是因为 ACF 中继器正在重复 id，它会同时打开所有隐藏的 div。

//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，但是我使用它们时运气不佳。

Answer 1

这应该有效

$('#button').click(function (event) {
  var button = $(event.currentTarget)
  button.parent().find("#buy").slideToggle("slow")
});

但 ID 必须是唯一的。我建议，根据 class.

选择

此外，上面的代码确实很脆弱，而且只是一个 hack。如果您的 HTML 结构发生变化，这将不再有效。

理想情况下，您必须能够唯一标识转发器的每次迭代并将索引附加到 id（因此它看起来像 id="buy001"

Answer 2

可以在 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; ?>

Source

您的 jQuery 片段将是

$('[id^=button]').click(function(evt) {
    var buyId = evt.target.id.replace("button","buy");
    $("#"+buyId).slideToggle("slow");
});

尝试 hide/show div 但是 .slideToggle() 应用于页面上的所有 divs - 高级自定义字段转发器

Trying to hide/show a div however .slideToggle() is applying to all divs on page - Advanced Custom Fields Repeater

javascript

jquery

slidetoggle

advanced-custom-fields