0

前言：我检查了我在 Stack 上可以找到的所有问题，但无法完成这项工作。

我有一个悬停脚本，其功能有点像图片库，当您将鼠标悬停在链接上时，它应该隐藏同级图像并显示与您悬停的链接相关的正确图像。

它使用 PHP 获取所有数据

    <section id="callouts" class="clearfix">
    <div class="fltLeft span_1_of_2">
        <h2>Popular Products</h2>
           <div id="productImages">
              <?php 
                  $counter = 0; 
                $products = get_field('popular_products'); if($products) { foreach ($products as $product) { $counter = $counter + 1; ?>
                <img class="image-<?php echo $counter; ?>" src="<?php echo $product['product_thumbnail'] ?>">       
            <?php }; } ?>
        </div>
        <?php 
            $counter = 0; 
            $products = get_field('popular_products'); if($products) { echo '<ul id="prodList">'; foreach ($products as $product) { $counter = $counter + 1; ?>
            <li class="product-<?php echo $counter; ?>"><?php echo $product['product_name'] ?></li>     
        <?php } echo '</ul>'; } ?>
    </div>
    <div id="shipping" class="fltRight span_1_of_2"></div>
    </section>

它产生这个html：

    <section id="callouts" class="clearfix">
    <div class="fltLeft span_1_of_2">
        <h2>Popular Products</h2>
        <div id="productImages">
                                <img class="image-1" src="http://localhost/wp-content/uploads/2013/11/popular-stationary.png">      
                                <img class="image-2" src="http://localhost/wp-content/uploads/2013/11/popular-business-cards.png">      
                                <img class="image-3" src="http://localhost/wp-content/uploads/2013/11/popular-brochures.png">       
                                <img class="image-4" src="http://localhost/wp-content/uploads/2013/11/popular-newsletters.png">     
                                <img class="image-5" src="http://localhost/wp-content/uploads/2013/11/popular-presentations.png">       
                                <img class="image-6" src="http://localhost/wp-content/uploads/2013/11/popular-posters.png">     
                                <img class="image-7" src="http://localhost/wp-content/uploads/2013/11/popular-postcards.png">       
                        </div>
        <ul id="prodList">              <li class="product-1">Business Stationary<br><br></li>      
                        <li class="product-2">Business Cards<br>   <br></li>        
                        <li class="product-3">Brochures & Flyers<br><br></li>       
                        <li class="product-4">Newsletters &<br>Event Programs</li>      
                        <li class="product-5">Presentations<br><br></li>        
                        <li class="product-6">Posters & Signs<br><br></li>      
                        <li class="product-7">Postcards & Rackcards<br><br></li>        
        </ul>           </div>
    <div id="shipping" class="fltRight span_1_of_2"></div>
</section>

我可以让它工作的唯一方法是一遍又一遍地重复我的 jquery 脚本：

$('.product-1').hover(
    function () {
        $('.image-1').fadeIn("fast");
        $('.image-1').siblings().hide();
    }
);
$('.product-2').hover(
    function () {
        $('.image-2').fadeIn("fast");
        $('.image-2').siblings().hide();
    }
);
$('.product-3').hover(
    function () {
        $('.image-3').fadeIn("fast");
        $('.image-3').siblings().hide();
    }
);
$('.product-4').hover(
    function () {
        $('.image-4').fadeIn("fast");
        $('.image-4').siblings().hide();
    }
);
$('.product-5').hover(
    function () {
        $('.image-5').fadeIn("fast");
        $('.image-5').siblings().hide();
    }
);
$('.product-6').hover(
    function () {
        $('.image-6').fadeIn("fast");
        $('.image-6').siblings().hide();
    }
);
$('.product-7').hover(
    function () {
        $('.image-7').fadeIn("fast");
        $('.image-7').siblings().hide();
    }
);

这是一种完全蹩脚的方法。我需要帮助重写这个，如果可能的话，一个很棒的解释你做了什么以及为什么。非常感谢！

4

2 回答 2

5

使用一个data-元素来保存一个值并泛化函数。

<li class="product" data-img='image5'>Business Cards</li>

JS：

$('.product').hover(
    function () {
        var targ = $(this).data('img');
        $(targ).fadeIn("fast");
        $(targ).siblings().hide();
    }
);
于 2013-11-14T22:31:23.540 回答
1

将其转换为循环并不像看起来那么简单，因为 i 在事件处理程序的上下文中不再可用，因此您必须在评估 i 时使用 IIFE 创建处理程序函数。但是你去：

for (var i = 1 ; i <= 7 ; i++ ) {
    $('.product-'+i).hover((function (num) {
        return function () {
            $('.image-'+num).fadeIn("fast");
            $('.image-'+num).siblings().hide();
        };
    })(i))
}
于 2013-11-14T22:32:15.993 回答