jquery悬停在另一个div中的列表项和显示图像，列表是动态的

我有一个Wordpress测试网站，并使用插件列出某个类别的最近发布的帖子的缩略图。我想对其进行更改，以避免列表中的每个项目显示其旁边的缩略图，只有正在悬停的项目才会在单独的div中显示其缩略图。jquery悬停在另一个div中的列表项和显示图像，列表是动态的

我喜欢一个jQuery解决方案，我在Shlomi Hassid的post here找到。但是，我无法调整它，因为他使用的是静态图像和'data-image'变量，这个变量并不在我正在使用的列表中。（他给出了一个小提琴例子。）

好像我需要将数据图像变量传递给PHP，使其工作，所以我尝试添加这哈西德的脚本：

var htthumb = $(this).data('image'); 
    $.ajax({ 
     type: 'POST', 
     url: 'http://testsite.humortimes.com/wp-content/plugins/recent-posts-widget-thumbs-mine/includes/widget.php', 
     data: {'variable': htthumb}, 
    });

.. 。而在PHP中添加$htimgsrc = $_POST['htthumb'];

然后，在列表中类中，创建列表中的PHP段之前加入data-image=$htimgsrc：

<li class="ht-menu-item" data-image=$htimgsrc <?php

但结果J ust使用变量名称显示上面的数据图像前缀，而不是我需要的源信息。

所以，我想我只需要将变量从js传递给php，或者完全不同的方式来做到这一点。

我正在处理的页面位于测试网站is here中。

感谢您的任何帮助。

编辑：

我一直在重新考虑这一点。我真的只需要将附件图像url放在“data-image =”之后，以便js找到图像，所以我不需要像上面那样从js获取变量。因此，在“有帖子”循环期间在插件中，我尝试使用wp_get_attachment_image($thumb_id)来获取图像url，其中$ thumb_id是插件中另一个PHP文件的一个变量，它是抓取缩略图的id。这样，我认为，我可以得到正确的图像。出于某种原因返回null。

任何想法将受到欢迎。谢谢。

来源

2017-06-03 jamminjames

请发送您正在编写的代码示例并告诉我们你到目前为止尝试过什么。请参阅https://stackoverflow.com/help/asking – Dashrath

根据请求进行编辑。 – jamminjames

我一直在重新考虑这一点。我真的只需要缩略图图像url，所以我不需要从js中获取它。但我在PHP中尝试了一些迄今为止没有奏效的东西。 – jamminjames

好了，放弃了试图从插件中获取图像附件信息（虽然这应该是可能的，因为在它的原始形式，它提供了列表中每个项目旁边的缩略图;但是我希望它在一个单独的div中，并且仅限于此同时悬停在列表项上）。我决定我只需要用我自己的功能来获取图片的网址。所以，我找到了一些有用的代码并对其进行了修改，将其插入到循环中，并使用为'data-image ='url生成的'$ htthumb1'变量：

if (has_post_thumbnail()) { 
     the_post_thumbnail(); 
    } else { 
     // No post thumbnail, try attachments instead. 
     $attachment = get_children(
     array(
      'post_parent' => get_the_ID(), 
      'post_type'  => 'attachment', 
      'post_mime_type' => 'image', 
      'order'   => 'DESC', 
      'numberposts' => 1, 
     ) 
    ); 
    if (! is_array($attachment) || empty($attachment)) { 
     return; 
    } 
    $attachment = current($attachment); 
    $htthumb1 = wp_get_attachment_thumb_url($attachment->ID); 
    };

来源

2017-06-09 05:32:37 jamminjames

jquery悬停在另一个div中的列表项和显示图像，列表是动态的

回答

相关问题