巩固重复的Jquery脚本

Question

前言:我把我在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();
    }
);

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

Answer 1

将它转换成一个循环并不像看起来那么简单，因为我在事件处理程序的上下文中不再可用，所以您需要在计算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))
}

Answer 2

使用data-元素保存一个值，并对函数进行泛化。

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

联署材料：

$('.product').hover(
    function () {
        var targ = $(this).data('img');
        $(targ).fadeIn("fast");
        $(targ).siblings().hide();
    }
);