Javascript 挣扎于循环和打开弹出窗口

我对jQuery不是很有经验，我想在它所在的div上打开这个弹出窗口（所以我想是用$（这个）的东西，就是不能让它工作：（），当我点击

。现在发生的是，它为循环中的每个项目打开每个弹出窗口。这是我的jQuery和HTML

<div class="container">

    <h1> Trekkers </h1>

    <section id="filter">
        Filter
    </section>

    <section id="tractoren">

        <?php
            $args = array( 
                'post_type' => 'tractoren', 
                'posts_per_page' => -1 
            );
            $loop = new WP_Query( $args );
            while ( $loop->have_posts() ) : $loop->the_post();
        ?>

            <div class="tractor">

                <figure>
                    <?php the_post_thumbnail('tr_thumb'); ?>
                </figure>

                <div id="content">

                    <h3> <?php the_title(); ?> </h3>
                    <span> Bouwjaar: <?php the_field('tractoren_bouwjaar'); ?> </span>
                    <span> Uren: <?php the_field('tractoren_uren'); ?> </span>

        <a class="btn" data-popup-open="popup-1" href="#">Bekijk trekker</a>

        <div class="popup" data-popup="popup-1">
            <div class="popup-inner">
                <h2><?php the_title(); ?></h2>
                <p><a data-popup-close="popup-1" href="#">Close</a></p>
                <a class="popup-close" data-popup-close="popup-1" href="#">x</a>
            </div>
        </div>

        <script>

          $(function() {

              $('[data-popup-open]').on('click', function(e)  {
                  var targeted_popup_class = jQuery(this).attr('data-popup-open');
                  $('[data-popup="' + targeted_popup_class + '"]').fadeIn(350);
                  e.preventDefault();
              });

              $('[data-popup-close]').on('click', function(e)  {
                  var targeted_popup_class = jQuery(this).attr('data-popup-close');
                  $('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);
                  e.preventDefault();
              });
          });
        </script>

                </div>

                <span class="price">
                    <?php if( get_field('tractoren_prijs') ): ?>
                        <?php the_field('tractoren_prijs'); ?>
                    <?php endif; ?>

                    <?php if( !get_field('tractoren_prijs') ): ?>
                        <?php echo 'Prijs onbekend' ?>
                    <?php endif; ?>

                </span>

            </div>

        <?php endwhile; ?>

    </section>

</div>

徒步旅行者
滤器
布贾尔：
乌伦：

$（函数（）{
$（“[data popup open]”）。在（'单击'）上，函数（e）{
var targeted_popup_class=jQuery（this）.attr（'data-popup-open'）；
$（“[data popup=“”+targeted_popup_class+”）.fadeIn（350）；
e、 预防默认值（）；
});
$（“[data popup close]”）。在（'click'，函数（e）上{
var targeted_popup_class=jQuery（this）.attr（'data-popup-close'）；
$（“[data popup=“”+targeted_popup_class+”）。淡出（350）；
e、 预防默认值（）；
});
});

---

谢谢。

我建议您使用已有的类，如

.btn

和

和

您可以使用方法打开弹出窗口：

$('.btn').on('click', function(e) {
  $(this).next('.popup').fadeIn();
  e.preventDefault();
});

和用于关闭：

$('.popup-close').on('click', function(e) {
  $(this).parent().parent().fadeOut();
  e.preventDefault();
});

下面的演示片段：

$（函数（）{
$（'.btn'）。在（'click'，函数（e）上{
$（this.next（'.popup'）.fadeIn（）；
e、 预防默认值（）；
});
$（'popup close'）。打开（'click'，函数（e）{
$（this.parent（）.parent（）.fadeOut（）；
e、 预防默认值（）；
});
})；

.popup{
显示：无；
}

徒步旅行者
滤器
一些图像
一些头衔
布贾尔：
乌伦：
一些弹出标题

一些图像
一些头衔
布贾尔：
乌伦：
一些弹出标题

成功了。非常感谢：）@Frisidan，太棒了。很乐意帮忙。在观察到jQuery代码在循环中之后，我也对答案进行了一些更新。不要那样做。把它放在圈外。你只需要一次。