如何在àforeach循环内的jQuery代码中定位ACF字段? [英] How to target an ACF field in a jQuery code inside à foreach loop?
问题描述
如何在àforeach循环内的jQuery代码中定位ACF字段?
How to target an ACF field in a jQuery code inside à foreach loop ?
当前，帖子在foreach循环中循环.每个帖子都会向教练展示照片，标题，简短说明和电话号码.所有这些元素都是ACF自定义字段，需要在每个人的后台中填写.
Currently, posts are looping in a foreach loop. Each post presents a coach with photo, title, small description and a phone number. All of this elements are ACF custom fields which need to be filled in a back-office for each person.
现在可以了.
每个教练的电话号码被隐藏，用户需要单击一个按钮(它是显示电话号码"图像)来查看电话(这也是另一个图像).我正在使用.attr()jQuery函数将第二张图片替换为第一张图片.
Phone number of each coach is hidden, the user needs to click on a button (which is an image "Show Number") to see the phone (which is another image as well). I'm using the .attr() jQuery function to replace the first image by the second one.
问题:当用户单击任何显示编号"图像时，显示最后一个图像编号.
The problem : when the user clicks on any "Show Number" image, the last image number is displayed.
期望(例如:尼古拉斯(Nicolas)为555-555-555 |安德里亚(Andrea)为555-485-784 |旋律为555-124-332) 当前(例如:尼古拉斯(Nicolas)为555-124-332 |安德里亚(Andrea)为555-124-332 |旋律为555-124-332)
Expectation (Ex : Nicolas as 555-555-555 | Andrea as 555-485-784 | Melody as 555-124-332) Currently (Ex : Nicolas as 555-124-332 | Andrea as 555-124-332 | Melody as 555-124-332)
任何建议将不胜感激.
谢谢
foreach ($related_posts_articles as $related_post ){
<div class="col-sm-6 col-md-6 col-lg-3 col-xs-12">
<div>
<a href="<?php echo get_permalink($related_post->ID); ?> ">
<?php echo get_the_post_thumbnail($related_post->ID,"square-300",array('class' => 'img-responsive')); ?>
</a>
<div>
<a href="<?php echo get_permalink($related_post->ID); ?>">
<h2>
<?php echo wp_html_excerpt(strip_tags(get_field('acf_titre_mini', $related_post->ID)), 30, '...' ); ?>
</h2>
</a>
<div>
<?php echo wp_html_excerpt( strip_tags(get_field('acf_description_mini',$related_post->ID)), 129, '...' ); ?>
</div>
<!-- START bloc -->
<?php if( get_field('acf_numero_image', $related_post->ID) ): ?>
<div align="center">
<img class="input_img" src="<?php the_field('acf_btnVoirNum_image', $related_post->ID); ?>" >
<script>
jQuery(document).ready(function($) {
$(".input_img").click(function() {
$(this).attr("src", "<?php the_field('acf_numero_image', $related_post->ID); ?>" );
});
});
</script>
</div>
<?php endif; ?>
<!-- END bloc -->
</div>
</div>
</div>
}
推荐答案
问题:当用户单击任何显示编号"图像时，显示最后一个图像编号.
The problem : when the user clicks on any "Show Number" image, the last image number is displayed.
这是因为您在if( get_field('acf_numero_image', $related_post->ID) )为真的循环的每次迭代中都添加了.click()处理程序，特别是以下部分:
This is because you're adding a .click() handler in every iteration of your loop where if( get_field('acf_numero_image', $related_post->ID) ) is truthy, specifically this part:
$(".input_img").click(function() {
$(this).attr("src", "<?php the_field('acf_numero_image', $related_post->ID); ?>" );
});
如果您查看呈现的HTML的页面源，它将看起来像以下内容:
If you view the page source for your rendered HTML, it's going to look something like the following:
<!-- loop 1 -->
<script>
jQuery(document).ready(function($) {
$(".input_img").click(function() {
$(this).attr("src", "some_image_1.jpg" );
});
});
</script>
<!-- loop 2 -->
<script>
jQuery(document).ready(function($) {
$(".input_img").click(function() {
$(this).attr("src", "some_image_2.jpg" );
});
});
</script>
<!-- loop 3 -->
<script>
jQuery(document).ready(function($) {
$(".input_img").click(function() {
$(this).attr("src", "some_image_3.jpg" );
});
});
</script>
<!-- etc. -->
因为每个循环都要添加另一个.click()处理程序，所以当您单击.input_img时，它将遍历每个click处理程序并将src更改为some_image_1.jpg，然后将
Because you're adding another .click() handler every loop, when you click on .input_img, it's going to go through each of your click handlers and change the src to some_image_1.jpg, then some_image_2.jpg, and so on, until it reaches the last one, hence why it appears to only display the last image number.
使用自定义的data-属性并将.click()处理程序移到循环外将解决此问题-以下精简示例:
Using a custom data- attribute and moving the .click() handler outside of the loop will fix this - abridged example below:
<?php
foreach ($related_posts_articles as $related_post) {
// wrapper <div> / other HTML here
?>
<!-- START bloc -->
<?php if (get_field('acf_numero_image', $related_post->ID)): ?>
<div align="center">
<!--
Adding custom data-acf-numero-image attribute here containing field value
-->
<img class="input_img" src="<?php the_field('acf_btnVoirNum_image', $related_post->ID); ?>" data-acf-numero-image="<?php the_field('acf_numero_image', $related_post->ID); ?>" />
</div>
<?php endif; ?>
<!-- END bloc -->
<?php
// closing <div> elements here
}
?>
<!--
One single block of JS to handle all clicks to .input_img, rather than adding
duplicate click handlers inside the foreach loop:
-->
<script>
jQuery(document).ready(function($) {
$(".input_img").click(function() {
// Get "acf_numero_image" value from custom data- attribute
var acfNumeroImage = $(this).attr("data-acf-numero-image");
// Update src attribute with custom acf_numero_image
$(this).attr("src", acfNumeroImage);
});
});
</script>
这篇关于如何在àforeach循环内的jQuery代码中定位ACF字段?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
