Q:

Consolidating Repetative Jquery Script

Preface: I went through every question I could find on Stack and couldn't make this work. 
I have a hover script that functions sort of like an image gallery, and when you hover over links, its supposed to hide the sibling images and display the correct one that related to the link you hovered over.
It gets all the data with 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>

and it produces this 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>

The only way I can get this to work is by repeating my jquery script over and over:
$('.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();
    }
);

Which is a totally lame way to do this. I need help rewriting this, and if possible an awesome explanation of what you did and why. Thank you so much!

A:

Use a data- element to hold a value and generalize the function.
<li class="product" data-img='image5'>Business Cards</li>

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

A:

Convertig it into a loop wasn't as trivial as it looked like, as i is not available in the context fo the event handlers anymore, so you ahve to use IIFE to create the handler functions while evaluating i in place. But there you go:
for (var i = 1 ; i <= 7 ; i++ ) {
    $('.product-'+i).hover((function (num) {
        return function () {
            $('.image-'+num).fadeIn("fast");
            $('.image-'+num).siblings().hide();
        };
    })(i))
}

