自定义循环丢失数据

Question

所以我有一个自定义循环。

假设单个页面上有 5 个 post，如下所示：

Post 1:

 Title : Post 1

 Content : Content 1

 Show more button

Post 2:

 Title : Post 2

 Content : Content 2

 Show more button

等等....

代码：

<div class="title">
    <?php the_title(); ?>
</div>
<div class="content">
    <?php the_content(); ?>
</div>
<button type="button" class="show_me_open">
  Show more button
</button>
<div id="show_me">
   <?php the_title(); ?>
   <?php the_content(); ?>
</div>

所以，标题和内容都不同了 5 posts。弹出按钮（显示更多按钮）来自 http://dev.vast.com/jquery-popup-overlay/

问题

假设您没有启用弹出布局，并使用其他一些方式来显示它。然后标题和内容与原始标题和内容匹配（如下示例）。

但是，如果弹出窗口显示标题和内容（显示更多按钮），则它只会显示第一个 post 的标题和内容（如下示例）。

1.没有弹出窗口：

Post 1:

 Title : post 1
 Content: content 1
 Show more button:  
        Title : post 1
        Content: content 1

Post 2:

 Title : post 2
 Content: content 2
 Show more button:  
        Title : post 2
        Content: content 2

Post3:

 Title : post 3
 Content: content 3
 Show more button:  
        Title : post 3
        Content: content 3

启用弹出窗口：

Post 1:

 Title : post 1
 Content: content 1
 Show more button:  
        Title : post 1
        Content: content 1

Post 2:

 Title : post 2
 Content: content 2
 Show more button:  
        Title : post 1
        Content: content 1

Post3:

 Title : post 3
 Content: content 3
 Show more button:  
        Title : post 1
        Content: content 1

我不确定它为什么这样做，但任何建议将不胜感激！

谢谢！

编辑

js代码很简单：

  $(document).ready(function() {          
    $('#show_me').popup();                  
    });

编辑 2

有人向我指出，一个 ID 用于所有其他 posts，它只拉第一个。

所以，我将 post_id 添加到按钮，它只会触发具有相同 post_id 的 div。

 <?php echo '<button type="button" class="show_me_open" data-post_id="' . esc_attr( $post->id ) . '">' ;?>
    <i class="material-icons royal_setting">settings</i>
<?php echo '</button>';?>

<?php echo '<div class="show_me" data-post_id="' . esc_attr( $post->id ) . '">' ;?>                     
    <?php the_title(); ?>                       
<?php echo '</div>';?>

现在，对于 jQuery，我该如何更改它，以便仅将与 show_me 的 class 相同的 post_id 作为目标？

谢谢！

Answer 1

@Emily，我认为问题只与您的弹出窗口 ID 有关 "show_me"。

正如你上面提到的 show_me 是 div 元素 post1。同样，您必须为每个 post 提供不同的 ID，例如 post 2 给 show_me_2 和依此类推，然后在 document.ready 中初始化所有弹出元素。

$('#show_me_1').popup();  
$('#show_me_2').popup();  
$('#show_me_3').popup();  
$('#show_me_4').popup();  
$('#show_me_5').popup();

EDIT-4 解决方案

<script>
$(document).ready(function() { 
    $('.show_me').popup(); //it was #show_me                    
    }); 
</script>
<?php echo '<button type="button" class="show_me_'. esc_attr( $post->id ) .'_open">' ;?>
    Show me open
<?php echo '</button>';?>

<?php echo '<div id="show_me_'. esc_attr( $post->id ) .'" class="show_me">' ;?>                     
    <?php the_title(); ?>                       
<?php echo '</div>';?>

我将 id 添加到 div 元素并添加“$post->id”。也许这可以解决您的问题。

自定义循环丢失数据

Custom loop losing its data

php

wordpress

jquery

popup