javascript - WordPress WooCommerce content-product.php javascript

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

这是我正在建立的wordpress主题，并且我有这个问题：


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


那么您会看到唯一的第一张图片正在使用脚本，为什么呢？

这是我使用过的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>

但是现在它们都被隐藏了，但是如果您将鼠标悬停在上面，那么哪个图像将显示所有图像上方的所有标题和价格，我只想在转到一张图像时向我显示该图像的标题和价格..我希望您会明白我的意思。

谢谢

最佳答案

尝试这个，

首先将那些按钮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);
});

希望它能工作..

关于javascript - WordPress WooCommerce content-product.php javascript，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21317572/