0

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

2 に答える 2

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>

それはそれを行う必要があります。

于 2013-07-05T00:03:38.607 に答える
0

最初に各アイテムを 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>
于 2013-07-04T23:59:57.030 に答える