javascript - php 在弹出的 div 中发布内容

Question

我的网站中有几个元素链接到单独的 php 帖子。该网站还有一个弹出 div(“这是一个自定义模式窗口”)。弹出 div 有两个部分:标题和内容。

单击元素时，将出现弹出窗口。我希望关联的 php 帖子标题和内容出现在弹出 div 的适当部分中。

注意:我已经尝试了一周来使用 php、ajax/jquery 组合来解决这个问题。我已经搜索了 google 和 stackoverflow，但似乎找不到丢失的链接。

<小时/>

下面是我的代码结构。

<小时/>

第一:这是我最接近的工作模型。 php post_title 和 post_content 被添加到弹出窗口的适当位置。但是为下一个元素添加代码会覆盖第一个元素的数据。

HTML

<div class="hexagon">
  <p class="verticalcenter center" data-toggle="popWindow" data-target="#popUp">
    <!-- ATTACH LATEST POST TITLE -->
      <?php $the_query = new WP_Query( 'cat=4' ); ?>
      <?php while ($the_query -> have_posts()) : $the_query -> the_post(); ?>
        <?php the_title(); ?>
      <?php endwhile;?>
  </p> 
</div>

<div class="hexagon">
  <p class="verticalcenter center" data-toggle="popWindow" data-target="#popUp">
    <!-- ATTACH LATEST POST TITLE -->
      <?php $the_query = new WP_Query( 'cat=5' ); ?>
      <?php while ($the_query -> have_posts()) : $the_query -> the_post(); ?>
        <?php the_title(); ?>
      <?php endwhile;?>
   </p>
</div>

JS

注意:“覆盖层”是不透明的背景，它覆盖主要内容，以帮助将注意力集中在“popUp”div 上。

$(document).ready(function() {
...//other code pertaining to website operation

//Click on Hexagons && Launch Modal
  $('.hexagon,.hexagonz,#mapToken,.mobileNav li').on('click', function() {
    $('.overlay').removeClass('hidden');
      $('#popUp')
        .addClass('animated fadeInUp')
        .css( {
            'bottom': '25%' 
        } )
  }); //end Modal Launch

...//other code pertaining to website operation

});// end $(document).ready

弹出窗口(模态)html 代码位于我的 footer.php 文件中，以及包含重复弹出窗口代码的 single.php 文件。

理想情况下:我想在不使用 (a href='') 的情况下完成此任务。该网站有一个启动页面，首次加载时会加载在主页前面。当我尝试使用 (a href='') 链接修复此问题时，它会触发启动页面(不是我想要的)。

希望结构和最终目标清晰。

Answer 1

您应该首先创建一个 PHP 脚本来向每个弹出窗口发送正确的信息。

然后，您可以在点击时将 $.post 附加到触发弹出窗口打开的按钮，并使用 'data-contents' 或类似内容

然后像这样发布帖子:

$(document).on('click', '.myPopupButton', function(e) {
    e.preventDefault();
    data = { content : $(this).attr('data-contents') };
    $.post('yourScript.php', data, function(json) {
        // Handle the data that comes from your script
        // i.e. :
        $('.myPopup .title').text(json['title']);
        $('.myPopup .body').text(json['body']);
    }
});

您的 PHP 应该期望一个类似 content => xxx 的值

所以你可以这样得到它:

if ($_POST['content'] == 'xxx') {

}
else if ( /*etc..*/ ) {}

现在弹出窗口的内容应该动态变化