Javascript Woocommerce产品图像悬停翻转

我正在使用一个叫做X主题的wordpress主题。我的首席开发人员保释了，这个功能不起作用。其目的是在发生鼠标输入/输出事件时，切换到该产品库中的第一个图像。查询正在查找不存在或不符合查询条件的继续发布ID。因此，我希望它只是以一种更好的方式获得图像，因为这种方式无法始终如一地工作

function x_woocommerce_shop_thumbnail() {
              GLOBAL $product;

              $stack            = x_get_stack();
              $stack_thumb      = 'entry-full-' . $stack;
              $stack_shop_thumb = $stack_thumb;
              $id               = get_the_ID();
              $rating           = $product->get_rating_html();
              woocommerce_show_product_sale_flash();
              echo '<div class="entry-featured">';
                echo '<a id="id'.$id.'" value="'.$id.'" href="'.get_the_permalink().'">';
                  echo get_the_post_thumbnail( $id , $stack_shop_thumb ); 
                  global $wpdb;
                  foreach($wpdb->get_results('SELECT ID FROM wp_posts WHERE post_parent = "'.$id.'" AND post_type = "attachment" ORDER BY ID DESC LIMIT 1') as $key => $row){
                    $file = '_wp_attached_file';
                    $childId = $row->ID;
                    global $wpdb;
                    $query = 'SELECT meta_value FROM wp_postmeta WHERE meta_key = "'.$file.'" AND post_id = "'.$childId.'"';
                    $otherImage = $wpdb->get_var($query);
                    if($otherImage != ''){
                        echo '<img id="otherImage" src="/wp-content/uploads/'.$otherImage.'"/>';
                    }
                  }
                  if ( ! empty( $rating ) ) {
                    echo '<div class="star-rating-container aggregate">' . $rating . '</div>';
                  }
                echo '</a>';
              echo "</div>";
             }

---

您是否阅读过教程，例如或那些应该有助于图像翻转的教程。正在调用/添加

x\u woocommerce\u shop\u缩略图（）

的位置在哪里？嘿！谢谢你的回复。我有过渡工作。正在进行的是鼠标悬停或次映像（产品库中的第一个映像）应该显示在鼠标悬停上，但不是。它默认为主图像或特色图像。好的，仍然需要知道调用

x\u woocommerce\u shop\u thumbnail（）

。以及所需的标记应该是什么。现在你只是要求我们调试这段代码，从技术上讲，这是离题的。好吧，我想明白了。java/jqery是可靠的。只要把这个放在你的页脚，以避免与头部冲突。问题是查询是否查找任何*。一旦修改了产品ID（如从变量更改为简单产品），ID将不再与图像的父ID按升序排列。因此，该查询被重新编写，1）对WP更友好，2）查找该产品的最新子id。下面是正确的代码，可以将其放入Woocommerce函数中，以使图像翻转显示第一个gallery image.global$wpdb；foreach（$wpdb->get_results（'SELECT SUBSTRING_INDEX（meta_value，，，，，1）作为wp_postemta中的ID，其中post_ID=“.”.$ID.”和meta_key=“_product_image_gallery””）作为$key=>$row）{$file='\u wp\u attached\u file'.$childId=$row->ID；您是否阅读了一些教程，例如或那些应该有助于图像翻转的教程。调用/添加

x\u-shop\u-thumbnail（）

的位置在哪里？嘿！感谢您的响应。我已经完成了转换。滚动或次图像是怎么回事（产品库中的第一个图像）应显示在鼠标上方，但不是。它默认为主图像或特色图像。好的，仍然需要知道x_商业_商店_缩略图（）的位置被调用。以及所需的标记应该是什么。现在你只是要求我们调试这段代码，从技术上讲，这是离题的。好吧，我想出来了。java/jqery是可靠的。只需将它放在页脚中，以避免与head冲突。问题是，一旦你修改了产品，查询会寻找任何*ID（如从变量更改为简单产品）ID不再与图像的父ID按升序排列。因此，重新编写了查询1）为了更方便使用WP，2）查找该产品的最新子id。下面是正确的代码，可以将其放入Woocommerce函数中，以使图像翻转显示第一个gallery图像。全局$wpdb；foreach（$wpdb->get_results（'SELECT SUBSTRING_INDEX（meta_value，，“，”，1）作为来自wp_Posteta的ID，其中post_ID=“'.$ID.”和meta_key=“_product_image_gallery””）作为$key=>$row）{$file='.\u wp_attached_file'；$childId=$row->ID；

    //Product Hover Image Switch

    jQuery(document).ready(function() {

        jQuery('[id^=id]').mouseover(function(){

            if(jQuery(this).children('#otherImage').attr('src') != ''){

                jQuery(this).fadeTo(200, 0, function(){

                    var source = jQuery(this).children('#otherImage').attr('src'),

                        original = jQuery(this).children('.wp-post-image').attr('srcset');

                    jQuery(this).children('.wp-post-image').attr('srcset', source);

                    jQuery(this).children('#otherImage').attr('src', original);

                }).fadeTo(200, 1);

            }

        });

        jQuery('[id^=id]').mouseout(function(){

            if(jQuery(this).children('#otherImage').attr('src') != ''){

                jQuery(this).fadeTo(200, 0, function(){

                    var source = jQuery(this).children('#otherImage').attr('src'),

                        original = jQuery(this).children('.wp-post-image').attr('srcset');

                    jQuery(this).children('.wp-post-image').attr('srcset', source);

                    jQuery(this).children('#otherImage').attr('src', original);

                }).fadeTo(200, 1);
            }
        });
    });