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

Question

我对 jQuery 不是很有经验，我想在它所在的 div 上打开这个弹出窗口（所以我假设带有 $(this) 的东西，只是无法让它工作:()，当我点击<a class="btn" data-popup-open="popup-1" href="#">Bekijk trekker</a>。现在发生的情况是它会打开循环中每个项目的每个弹出窗口。这是我的 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>

谢谢。

Answer 1

我建议您使用您已经拥有的类，例如 .btn 和 .popup-close。

您可以使用next()方法打开弹窗：

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

和 parent() 表示关闭：

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

下面的示范性sn-p：

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

.popup {
  display: none;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">

  <h1> Trekkers </h1>

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

  <section id="tractoren">


    <div class="tractor">

      <figure>
        some image
      </figure>

      <div id="content">

        <h3>
          some 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>
              some popup title
            </h2>
            <p><a data-popup-close="popup-1" class='popup-close' href="#">Close</a></p>
            <a class="popup-close" data-popup-close="popup-1" href="#">x</a>
          </div>
        </div>



      </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>
 <div class="tractor">

      <figure>
        some image
      </figure>

      <div id="content">

        <h3>
          some 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>
              some popup title
            </h2>
            <p><a data-popup-close="popup-1" class='popup-close' href="#">Close</a></p>
            <a class="popup-close" data-popup-close="popup-1" href="#">x</a>
          </div>
        </div>



      </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>

  </section>

</div>