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。
任何想法将受到欢迎。谢谢。
好了,放弃了试图从插件中获取图像附件信息(虽然这应该是可能的,因为在它的原始形式,它提供了列表中每个项目旁边的缩略图;但是我希望它在一个单独的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);
};
请发送您正在编写的代码示例并告诉我们你到目前为止尝试过什么。请参阅https://*.com/help/asking – Dashrath
根据请求进行编辑。 – jamminjames
我一直在重新考虑这一点。我真的只需要缩略图图像url,所以我不需要从js中获取它。但我在PHP中尝试了一些迄今为止没有奏效的东西。 – jamminjames