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

Posted 2023-03-29

【中文标题】jquery悬停列表项并在另一个div中显示图像，列表是动态的

【英文标题】：jquery hover a list item and display image in another div, list is dynamic

【发布时间】：2017-11-04 13:33:31

【问题描述】：

我有一个 Wordpress 测试站点，并且正在使用一个插件来列出某个类别的最近帖子，以及帖子中的缩略图。我想更改它，以便列表中的每个项目在其旁边显示缩略图，只有悬停的项目在单独的 div 中显示其缩略图。

我喜欢我在 Shlomi Hassid 的 post here 找到的一个 jquery 解决方案。但是，我无法适应它，因为他使用的是静态图像和“数据图像”变量，这在我正在使用的列表中不存在。 （他举了一个小提琴的例子。）

看来我需要将 data-image 变量传递给 php 以使其工作，所以我尝试将其添加到 Hassid 的脚本中：

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

但结果只是显示了上面带有变量名的数据图像前缀，而不是我需要的源信息。

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

我正在处理的页面，在一个测试站点中，is here。

感谢您的帮助。

编辑：

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

欢迎任何想法。谢谢。

【问题讨论】：

请发布您正在处理的代码示例，并向我们展示您迄今为止尝试过的内容。参考***.com/help/asking

按要求进行编辑。

我一直在重新考虑这一点。我真的只需要缩略图URL，所以我不需要从js中获取它。但是我在 PHP 中尝试了一些到目前为止还没有奏效的东西。

【参考方案1】：

好的，放弃尝试从插件中获取图像附件信息（尽管这应该是可能的，因为在其原始形式中，它会在列表中的每个项目旁边提供缩略图；但我希望它在单独的 div，并且仅在将鼠标悬停在列表项上时）。我决定只需要用我自己的函数获取图像的 url。因此，我找到了一些有用的代码并对其进行了修改，将其插入循环中，并使用为 '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 );
    ;