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/

Answer 2

Use:

  $(".color-img1,.color-img2,.color-img3,.color-img4").hover(function() {
        idnum=$(this).attr('class').replace( /^\D+/g, '').replace(/[^a-zA-Z ]/g, "")                
        class="caption"+idnum;
        $('.'+class).show();
        });

Answer 3

Step one

use CSS to make .captionX hidden using display:none; then you won't need the original hide statement.

Step Two

use a single bind $(".colors img").hover(function() {} then show the caption relevant to the object that is "hovered" using $(this).parent("li").children(".caption").show() or something similair.

Answer 4

Simply:

$("ul.colors").children('li').hover(function() {
    $(this).children('div[class^="caption"]').show();
});

This hover function is activated when you hover on any li child of ul.colors; then calls show() on any div child element the li may have whose class begins with "caption".

Alternatively you can make use of jQuery's on() method:

$("ul.colors").on('mouseover', 'li', function() {
    $(this).children('div[class^="caption"]').show();
});

Answer 5

You may use the same class on all buttons to simplify, see this:

http://jsfiddle.net/FaUSG/

As you can see you can use two or more class names separated by space as in the example: class="color-img color-img1"

color-img takes care of common behaviour (what applies to all the buttons), color-img1 takes care of single button behaviour (like button color for instance)

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

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

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

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

This way the code reduces to:

$(function() {
        $('.caption').hide();

        $(".color-img").hover(
            function() {
                $(this).find('.caption').show();
            },
            function() {
                // uncomment this if you also want to hide it at rollout
                // $(this).find('.caption').hide();
            }
        );
});