Question

我试图在WordPress模板中一起使用WordPress和jQuery。基本上，我所拥有的是，当将鼠标悬停在页面上的某个项目上时，例如“ - 将另一个DIV附加到此处，让我们称之为”。

我需要的是WordPress帖子内容出现在这个附加的“项目内容”DIV中。

以下是我的代码示例以及我尝试过的内容，我需要帮助找到有效的解决方案：

WordPress代码：

<?php if(have_posts()):?>
<?php while(have_posts()):the_post();?>
     <div class="item"></div>
<?php endwhile;?>
<?php endif;?>

jQuery代码：

$(".item").live("mouseenter", function() {
//code to show description
$(this).append('<div class="item-content"><?php the_content();?></div>');

}）;

这似乎不起作用，所以我确定我接近这完全错了，有人可以告诉我该怎么做吗？

请注意，页面上会有多个项目，因此附加内容必须在WordPress循环中进行，以便将正确的内容附加到正确的项目中 - 我希望这是有意义的。

由于扎克

Answer 1

如果您的jQuery位于外部Javascript文件中，则无法在代码中使用Wordpress函数（或任何php）。

我认为如果你将<script></script>放在你的PHP文件中的Wordpress循环中，你的代码就会起作用，但我认为这不是实现你所寻找的最佳方法。 / p>

听起来你正试图在悬停上实现简单的显示/隐藏效果。你为什么不这样做：

PHP

立即打印所有PHP内容。稍后无需使用您的Javascript进行物理附加;而只是展示和隐藏它。

<?php if(have_posts()):while(have_posts()):the_post(); ?>
     <div class="item">
          <div class="item-content">
               <?php the_content();?>
          </div>
     </div>
<?php endwhile; endif; ?>

CSS

从头开始隐藏您的.item-content div

.item-content{display:none;}

的jQuery

最后，在你的jQuery中，为你的.item div编写一个show / hide hover函数。（注意：如果您将jQuery代码放在jQuery(document).ready(function(){ });中，则根本不需要使用“live”。）

    jQuery(document).ready(function(){
         jQuery('.item').hover(
              function(){
                   jQuery(this).children('.item-content').show();
              }, //hover in
              function(){
                   jQuery(this).children('.item-content').hide();
              } //hover out
         ); 
     });

jQuery和WordPress - 在WordPress模板中添加“the_content”

1 个答案:

PHP

CSS

的jQuery