jQuery Want to get rid of multiple click statements

Question

Here is my website that I've been working on: http://jaakkouusitalo.fi/new As you can see there is those four colored squares, all of the have different classes.

I would like to simplify it, making if and and else statements. I lack skills of knowing what to do so I decided to ask directly here.

Here is my html file:

    <section>
        <h2>Color combination should be following:</h2>
        <ul class="colors">
            <li class="color-img1">
                <img src="img/1.png" />
                <div class="caption1">
                    #FFD800
                    </div>
                </li>

                <li class="color-img2">
                    <img src="img/2.png" />
                    <div class="caption2">

                    </div>
                </li>

                <li class="color-img3">
                    <img src="img/3.png" />
                    <div class="caption3">
                        #587498
                    </div>
                </li>

                <li class="color-img4">
                    <img src="img/4.png" />
                    <div class="caption4">
                    #E86850
                    </div>
                </li>
            </ul>
        </section>

Currently I'm handling my jQuery like this:

$( document ).ready(function() {

            $('.caption1, .caption2, .caption3, .caption4').hide();

            $(".color-img1").hover(function() {
                $('.caption1').show();
            });

            $(".color-img2").hover(function() {
                $('.caption2').show();
            });

            $(".color-img3").hover(function() {
                $('.caption3').show();
            });

            $(".color-img4").hover(function() {
                $('.caption4').show();
            });
        });

I think there is better way to make this. I just don't know how.

Answer 1

The correct way to do this would be with CSS, and I have listed the CSS solution below. However first will answer with the javascript solution.

Please see a JS Fiddle of the results:

• JavaScript version: http://jsfiddle.net/Nh8xM/1/
• CSS version:http://jsfiddle.net/53X25/

Javascript Solution

Simplify your HTML to just use .caption instead of .caption1,2,3,4 and .color-img instead of 1,2,3,4:

<section>
    <h2>Color combination should be following:</h2>
    <ul class="colors">
        <li class="color-img">
            <img src="img/1.png" />
            <div class="caption">
                #FFD800
                </div>
            </li>

            <li class="color-img">
                <img src="img/2.png" />
                <div class="caption">
                #FFD800
                </div>
            </li>

            <li class="color-img">
                <img src="img/3.png" />
                <div class="caption">
                    #587498
                </div>
            </li>

            <li class="color-img">
                <img src="img/4.png" />
                <div class="caption">
                #E86850
                </div>
            </li>
        </ul>
    </section>

And change your javascript like so - comments inline explaining what it does:

$( document ).ready(function() {

    $('.caption').hide();
        //use .on (and mouseover) syntax over .hover
        $(".color-img").on("mouseover", function () {
        //find child element .caption, and show
        $(this).find('.caption').show();
    });

});

Result: http://jsfiddle.net/Nh8xM/1/

CSS Solution

Use the simplified HTML as per the javascript version, but in CSS all you would need to do is have:

.caption { 
  display:none;
 }
.colors li:hover .caption {
 display:block;
 }

Result: http://jsfiddle.net/53X25/