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

使用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();
    }
);

Answer 2

将它转换为循环并不像它看起来那么简单，因为我不再在事件处理程序的上下文中使用，所以你要在评估我的时候使用IIFE来创建处理函数。但是你去了：

for (var i = 1 ; i <= 7 ; i++ ) {
    $('.product-'+i).hover((function (num) {
        return function () {
            $('.image-'+num).fadeIn("fast");
            $('.image-'+num).siblings().hide();
        };
    })(i))
}

合并重复的Jquery脚本

2 个答案: