javascript - Wordpress WooCommerce content-product.php javascript

Question

http://intelmarketing.mk/demos/boutiques/

这是我正在构建的 WordPress 主题，我遇到了这个问题:

1. 尝试打开 http://intelmarketing.mk/demos/boutiques/
2. 向下滚动到新品
3. 将鼠标悬停在第一张图像上

您会看到唯一的第一个图像正在与脚本配合使用，这是为什么？

这是我使用的 content-product.php 文件中的代码

<script>
$('#div1').mouseover(function() {
    $('#div2').fadeIn(500);
});

$('#div2').mouseover(function() {
    $('#div2').fadeIn(500);
});

$('#div1').mouseout(function() {
    $('#div2').fadeOut(500);
});

$('#div2').hide().mouseout(function() {
    $('#div2').fadeOut(500);
});
</script>

<?php
/**
 * The template for displaying product content within loops.
 *
 * Override this template by copying it to yourtheme/woocommerce/content-product.php
 *
 * @author      WooThemes
 * @package     WooCommerce/Templates
 * @version     1.6.4
 */

if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly

global $product, $woocommerce_loop;

// Store loop count we're currently on
if ( empty( $woocommerce_loop['loop'] ) )
    $woocommerce_loop['loop'] = 0;

// Store column count for displaying the grid
if ( empty( $woocommerce_loop['columns'] ) )
    $woocommerce_loop['columns'] = apply_filters( 'loop_shop_columns', 4 );

// Ensure visibility
if ( ! $product || ! $product->is_visible() )
    return;

// Increase loop count
$woocommerce_loop['loop']++;

// Extra post classes
$classes = array();
if ( 0 == ( $woocommerce_loop['loop'] - 1 ) % $woocommerce_loop['columns'] || 1 == $woocommerce_loop['columns'] )
    $classes[] = 'first';
if ( 0 == $woocommerce_loop['loop'] % $woocommerce_loop['columns'] )
    $classes[] = 'last';
?>
<li <?php post_class( $classes ); ?>>

    <?php do_action( 'woocommerce_before_shop_loop_item' ); ?>

    <a href="<?php the_permalink(); ?>">
        <div id="div1">
        <?php
            /**
             * woocommerce_before_shop_loop_item_title hook
             *
             * @hooked woocommerce_show_product_loop_sale_flash - 10
             * @hooked woocommerce_template_loop_product_thumbnail - 10
             */
            do_action( 'woocommerce_before_shop_loop_item_title' );
        ?>
        </div>
        <div id="div2">
        <h3><?php the_title(); ?></h3>

        <?php
            /**
             * woocommerce_after_shop_loop_item_title hook
             *
             * @hooked woocommerce_template_loop_price - 10
             */
            do_action( 'woocommerce_after_shop_loop_item_title' );
        ?>
    </div>
    </a>

    <?php do_action( 'woocommerce_after_shop_loop_item' ); ?>

</li>

如果有人知道如何解决此问题，请告诉我:)

谢谢!

更新 我将脚本更改为

<script>

$('.attachment-shop_catalog').mouseover(function() {
    $('.amount').fadeIn(500);
    $('#div2 h3').fadeIn(500);
});

$('.amount').mouseover(function() {
    $('.amount').fadeIn(500);
});

$('#div2 h3').mouseover(function() {
    $('#div2 h3').fadeIn(500);
});

$('.attachment-shop_catalog').mouseout(function() {
    $('.amount').fadeOut(500);
    $('#div2 h3').fadeOut(500);
});

$('.amount').hide().mouseout(function() {
    $('.amount').fadeOut(500);
});

$('#div2 h3').hide().mouseout(function() {
    $('#div2 h3').fadeOut(500);
});
</script>

但现在它们都被隐藏了，但是如果你将鼠标悬停在什么图像上，无论什么图像都会显示所有图像之上的所有标题和价格，我只想当我转到一张图像时只显示该图像的标题和价格。我希望你能明白我的意思..

谢谢

Answer 1

试试这个，

首先设置这些按钮 style:none 以便在首次加载时隐藏，并将以下 CSS 添加到样式表中。

ul.products li.product h3, ul.products li.product .amount{display:none;} 

尝试以下而不是您的脚本。

jQuery('ul.products li.product').hover(function(){
  jQuery(this).find('h3').fadeIn(500);
  jQuery(this).find('.amount').fadeIn(500);
},function(){
  jQuery(this).find('h3').fadeOut(500);
  jQuery(this).find('.amount').fadeOut(500);
});

希望它有效..