javascript - 带有 WordPress 循环的 jquery

Question

我在 WordPress 循环中使用jquery.bpopup 。如您所见，有一个触发器 id 和一个弹出 id。如何以正确的方式实现 jquery？现在只有循环中的第一个帖子可以工作。任何帮助是极大的赞赏。

循环

while ( have_posts() ) : the_post(); ?>

<a href="#" id="trigger_pop_up_<?php the_ID(); ?>"><?php the_title(); ?></a>

<div id="pop_up_<?php the_ID(); ?> "> 
  <?php the_post_thumbnail(); ?> ?>
  <p>some random content</p>
</div>

<?php endwhile;?>

jQuery

<script>
jQuery(document).ready(function($) {

        // Binding a click event
        // From jQuery v.1.7.0 use .on() instead of .bind()
        $('#trigger_pop_up_<?php the_ID(); ?>').bind('click', function(e) {

            // Prevents the default action to be triggered. 
            e.preventDefault();

            // Triggering bPopup when click event is fired
            $('#pop_up_<?php the_ID(); ?>').bPopup();

    });

  });
</script>   

Answer 1

PHP 代码不会在 javascript 文件中执行，因此<?php the_ID(); ?>什么也不做，并且可能会导致 js 错误，这甚至会阻止您的代码运行。

您需要做的是手动解析 id 字段。

<script>
jQuery(document).ready(function($) {

        // Binding a click event
        // From jQuery v.1.7.0 use .on() instead of .bind()
        $("a#[id*='trigger_pop_up_']").bind('click', function(e) {

            // Prevents the default action to be triggered. 
            e.preventDefault();

            var id_number = parseInt(this.attr('id').replace('trigger_pop_up_',''), 10);

            // Triggering bPopup when click event is fired
            $('#pop_up_' + id_number).bPopup();

    });

  });
</script>

那应该这样做。

Answer 2

首先在每个项目周围包装一个 div 并将一个类而不是 id 分配给锚标记和弹出内容容器：

<? while ( have_posts() ) : the_post(); ?>
    <div class="popup" id="popup_<? the_ID(); ?>">
        <a href="#" class="popup-button">
            <? the_title(); ?>
        </a>

        <div class="popup-content"> 
          <? the_post_thumbnail(); ?>
          <p>some random content</p>
        </div>
    </div>
<? endwhile; ?>

其次，在 jQuery 中使用这些类来绑定事件，on而不是bind：

<script>
    $(document).ready(function() {
        $(document).on('.popup-button', 'click', function(e) {
            $(this).next('.popup-content').bPopup();
            return false;
        });
    });
</script>