Поле повторителя ACF не открывается модально при вставке счетчика

Question

Поле повторителя ACF не открывается модально при вставке счетчика

Пробовал несколько подходов, но ни один из них не работает и не может понять, что еще делать. Как часть страницы команды, у меня есть поле повторителя с 4 подполями — изображение, заголовок (заголовок), ссылка (для запуска модального текста) и детали (текстовое содержимое модального режима) — где некоторые должны открывать модал с дополнительной информацией при нажатии. Модал работает нормально, но когда я пытаюсь вставить в код счетчик, чтобы открыть соответствующее подполе для каждого члена команды, он перестает работать и ничего не открывается.

Вот немного кода. Буду признателен за любую оказанную помощь.

<div class="team-block w4 clear" >
<?php
if( have_rows('team_member') ):
$counter = 1;
?>
<ul>
<?php
while( have_rows('team_member') ): the_row();

// vars
$image = get_sub_field('team_member_image');
$title = get_sub_field('team_member_title');
$link = get_sub_field('link_to_details');
$details = get_sub_field('team_member_details');
?>
<li class="team-member-box">
<?php if( $link ): ?>
<a href="<?php echo $link; ?>">
<?php endif; ?>
<img class="team-member-image" src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt'] ?>" />
<?php
echo $title;
if( $link ):
?>
</a>
<?php
endif;
if( $link ):
?>
<div class="remodal team-member-details" data-remodal-id="modal<?php echo $counter;?>">
<button data-remodal-action="close" class="remodal-close"></button>
<h3>Qualifications</h3>
<p><?php echo $details; ?></p>
</div>
<?php endif; ?>
</li>
<?php
$counter++;
endwhile;
?>
</ul>
<?php endif; ?>
</div>

0

advanced-custom-fields php repeater wordpress

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Проверь это:

<a href="#modal1">Modal №1</a>
<a href="#modal2">Modal №2</a>
<a href="#modal3">Modal №3</a><div class="remodal team-member-details" data-remodal-id="modal1">
<button data-remodal-action="close" class="remodal-close"></button>
<h3>Qualifications</h3>
<p>yeah</p>
</div>

<div class="remodal team-member-details" data-remodal-id="modal2">
<button data-remodal-action="close" class="remodal-close"></button>
<h3>Qualifications</h3>
<p>yeah 2</p>
</div>

<div class="remodal team-member-details" data-remodal-id="modal3">
<button data-remodal-action="close" class="remodal-close"></button>
<h3>Qualifications</h3>
<p>yeah 3</p>
</div>

Это работает как ожидалось. Когда я смотрю на ваш код, я предполагаю, что нажатие на изображение shoukd вызывает модальное, верно? Я так, попробуйте это:

<div class="team-block w4 clear" >

<?php if( have_rows('team_member') ): ?>

<?php $counter = 1; ?><ul>

<?php while( have_rows('team_member') ): the_row();

// vars
$image = get_sub_field('team_member_image');
$title = get_sub_field('team_member_title');
$link = get_sub_field('link_to_details');
$details = get_sub_field('team_member_details');

?><li class="team-member-box"><a href="modal<?php echo $counter;?>"><img class="team-member-image" src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt'] ?>" />

<?php echo $title; ?>

</a>

<?php if( $link ): ?>
<div class="remodal team-member-details" data-remodal-id="modal<?php echo $counter;?>">
<button data-remodal-action="close" class="remodal-close"></button>
<h3>Qualifications</h3>
<p><?php echo $details; ?></p>
</div>
<?php endif; ?>

</li>

<?php $counter++; ?>

<?php endwhile; ?>

</ul>

<?php endif; ?>

</div>

Я не уверен, что это правильно (не знаю, что делать с $ link var), но это должно работать.

0