Combine Multiple Hover Functions

Question

I am fairly new to jQuery and I am trying to figure out if there is a better way to write the jQuery code I have written below.

I was wondering if I can make the code leaner instead of writing a function for each hover effect that basically do the same thing.

HTML:

<form action="" method="post" class="rating-choice empty">
    <ul>
        <li class="one">
            <label><input type="radio" value="0.5" name="rating" id="rating-1" />0.5 stars</label>
        </li>
        <li class="two">
            <label><input type="radio" value="1" name="rating" id="rating-2" />1 star</label>
        </li>
        <li class="three">
            <label><input type="radio" value="1.5" name="rating" id="rating-3" />1.5 stars</label>
        </li>
        <li class="four">
            <label><input type="radio" value="2" name="rating" id="rating-4" />2 stars</label>
        </li>
        <li class="five">
            <label><input type="radio" value="2.5" name="rating" id="rating-5" />2.5 stars</label>
        </li>
        <li class="six">
            <label><input type="radio" value="3" name="rating" id="rating-6" />3 stars</label>
        </li>
        <li class="seven">
            <label><input type="radio" value="3.5" name="rating" id="rating-7" />3.5 stars</label>
        </li>
        <li class="eight">
            <label><input type="radio" value="4" name="rating" id="rating-8" />4 stars</label>
        </li>
        <li class="nine">
            <label><input type="radio" value="4.5" name="rating" id="rating-9" />4.5 stars</label>
        </li>
        <li class="ten">
            <label><input type="radio" value="5" name="rating" id="rating-10" />5 stars</label>
        </li>
    </ul>
</form>

jQquery:

$(document).ready(function(){
    $('.one').hover(
        function(){
            $('.rating-choice').prevAll().addBack().addClass('rating-1');
            $('.rating-choice').nextAll().removeClass('empty');
        },
        function(){
            $('.rating-choice').prevAll().addBack().removeClass('rating-1');
        }
    );

    $('.two').hover(
        function(){
            $('.rating-choice').prevAll().addBack().addClass('rating-2');
            $('.rating-choice').nextAll().removeClass('empty');
        },
        function(){
            $('.rating-choice').prevAll().addBack().removeClass('rating-2');
        }
    );

    $('.three').hover(
        function(){
            $('.rating-choice').prevAll().addBack().addClass('rating-3');
            $('.rating-choice').nextAll().removeClass('empty');
        },
        function(){
            $('.rating-choice').prevAll().addBack().removeClass('rating-3');
        }
    );

    $('.four').hover(
        function(){
            $('.rating-choice').prevAll().addBack().addClass('rating-4');
            $('.rating-choice').nextAll().removeClass('empty');
        },
        function(){
            $('.rating-choice').prevAll().addBack().removeClass('rating-4');
        }
    );

    $('.five').hover(
        function(){
            $('.rating-choice').prevAll().addBack().addClass('rating-5');
            $('.rating-choice').nextAll().removeClass('empty');
        },
        function(){
            $('.rating-choice').prevAll().addBack().removeClass('rating-5');
        }
    );

    $('.six').hover(
        function(){
            $('.rating-choice').prevAll().addBack().addClass('rating-6');
            $('.rating-choice').nextAll().removeClass('empty');
        },
        function(){
            $('.rating-choice').prevAll().addBack().removeClass('rating-6');
        }
    );

    $('.seven').hover(
        function(){
            $('.rating-choice').prevAll().addBack().addClass('rating-7');
            $('.rating-choice').nextAll().removeClass('empty');
        },
        function(){
            $('.rating-choice').prevAll().addBack().removeClass('rating-7');
        }
    );

    $('.eight').hover(
        function(){
            $('.rating-choice').prevAll().addBack().addClass('rating-8');
            $('.rating-choice').nextAll().removeClass('empty');
        },
        function(){
            $('.rating-choice').prevAll().addBack().removeClass('rating-8');
        }
    );

    $('.nine').hover(
        function(){
            $('.rating-choice').prevAll().addBack().addClass('rating-9');
            $('.rating-choice').nextAll().removeClass('empty');
        },
        function(){
            $('.rating-choice').prevAll().addBack().removeClass('rating-9');
        }
    );

    $('.ten').hover(
        function(){
            $('.rating-choice').prevAll().addBack().addClass('rating-10');
            $('.rating-choice').nextAll().removeClass('empty');
        },
        function(){
            $('.rating-choice').prevAll().addBack().removeClass('rating-10');
        }
    );  
});

That's not a good way to do anything with javascript... :( makes me sad looking at this code — vsync
– vsync, Commented Jun 6, 2015 at 16:52
@vsync It makes me sad to that's why I am asking this question duh lol. — user4981729
– user4981729, Commented Jun 6, 2015 at 16:53
Think differently! There are a lot of tutorials where you can get better at this... Imagine if you have to write some more complex task.. — ventsi.slav
– ventsi.slav, Commented Jun 6, 2015 at 16:58
@ventsi.slav, any suggestion on some tutorials for beginners? — user4981729
– user4981729, Commented Jun 6, 2015 at 17:05

Abhishekh Gupta · Accepted Answer · 2015-06-06 16:56:55Z

2

Simply attach the hover event on li like this:

$(document).ready(function(){
    $('li').hover(
        function(){
            var classSuffix = $(this).find('input').attr('id').split('-')[1];
            $('.rating-choice').prevAll().addBack().addClass('rating-' + classSuffix);
            $('.rating-choice').nextAll().removeClass('empty');
        },
        function(){
            var classSuffix = $(this).find('input').attr('id').split('-')[1];
            $('.rating-choice').prevAll().addBack().removeClass('rating-' + classSuffix);
        }
    );
});

answered Jun 6, 2015 at 16:56

Abhishekh Gupta

6,2464 gold badges21 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user4981729 Over a year ago

Thanks, this code works great thanks for all the help. Do you have any recommendations for some good jquery reading material for beginners?

halfer · Accepted Answer · 2018-06-18 06:55:54Z

0

You can achieve this by simply adding another class all the li's or using hierarchy and write only one hover function.

edited Jun 18, 2018 at 6:55

halfer

20.2k20 gold badges111 silver badges208 bronze badges

answered Jun 6, 2015 at 16:55

Nikhil Aggarwal

28.5k4 gold badges46 silver badges61 bronze badges

1 Comment

Nikhil Aggarwal Over a year ago

Let us change the <li class="one"> with <li class="one my-list-element"> and update this for all the li's and then update $('.one').hover( with $('.my-list-element').hover( and remove all other hover event.s

Collectives™ on Stack Overflow

Combine Multiple Hover Functions

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related