Chaging background color on hover using foreach

Question

I am using this code (smarty php template code)

{foreach $rewards as $reward}
                            <div id="reward" data-id="{$reward['id']}">
                                <div class="reward_data{$reward['id']}">
                                    <b>{strtoupper($reward['title'])}:</b><br/>
                                    {html_entity_decode($reward['description'])}
                                    <br/>
                                    <br/>
                                    <b>Estimated Delivery:</b> {$reward['estimated_delivery_date']}
                                    <br/>
                                    <br/>
                                    <button class="btn btn-danger">Select This Project</button>
                                </div>
                            </div>
                            <br/>
                            <br/>
                            <br/>
                        {/foreach}

and in jquery i am using

$(document).ready(function () {
    $('#reward').hover(function () {
        var reward_id = $(this).attr('data-id');
        $('.reward_data' + reward_id).css("background-color", "#2bde73");
        $('.reward_data' + reward_id).css("padding", "10px");
        $('.reward_data' + reward_id).css("border-radius", "10px");
    }, function () {
        var reward_id = $(this).attr('data-id');
        $('.reward_data' + reward_id).css("background-color", "#ffffff");
    });
});

On hover ist result from foreach the background color is changed but on 2nd and above results there is effect of on hover. Please help me related this I am thankful to you

Looks like you have mulitple elements with the same ID, that might be a problme. Also, why not using plain ol' CSS? — Damien Pirsy, Apr 28 '15 at 11:47
i m getting different ids here var reward_id = $(this).attr('data-id'); — , Apr 28 '15 at 11:50
Refer @Kevin Nagurski answer it is simple and straight forward — Anto S, Apr 28 '15 at 12:33

score 1 · Answer 1 · answered Apr 28 '15 at 11:55

For simply changing the background color on hover, CSS is the tool you need. First of all, you need to use class instead of id as ids should be unique.

So

<div id="reward" data-id="{$reward['id']}">

Becomes

<div class="reward" data-id="{$reward['id']}">

Then create a new CSS rule as follows

.reward:hover .reward-data {
    background-color: #2bde73;
    padding: 10px;
    border-radius: 10px;
}

No need for JS and jQuery.

score 0 · Answer 2 · edited May 23 '17 at 10:24

0

See this: Can multiple different HTML elements have the same ID if they're different elements?

If you know that an ID needs to be unique, you'll see that this won't work: you have the ID "reward" multiple times.

A solution could be that you change the ID to a class, and change the hash to a dot in your jquery.

edited May 23 '17 at 10:24

Community

1
1

answered Apr 28 '15 at 11:48

Blaatpraat

2,829
11
23

working now i had changed #reward to .reward and .reward-data to #reward-data – Apr 28 '15 at 11:53

score 0 · Answer 3 · answered Apr 28 '15 at 12:20

change your id to class:

{foreach $rewards as $reward}
                            <div class="reward" data-id="{$reward['id']}">
                                <div class="reward_data{$reward['id']}">
                                    <b>{strtoupper($reward['title'])}:</b><br/>
                                    {html_entity_decode($reward['description'])}
                                    <br/>
                                    <br/>
                                    <b>Estimated Delivery:</b> {$reward['estimated_delivery_date']}
                                    <br/>
                                    <br/>
                                    <button class="btn btn-danger">Select This Project</button>
                                </div>
                            </div>
                            <br/>
                            <br/>
                            <br/>
                        {/foreach}

And jquery as below:

$(document).ready(function () {
    $('.reward').hover(function () {
        var reward_id = $(this).attr('data-id');
        $('.reward_data' + reward_id).css("background-color", "#2bde73");
        $('.reward_data' + reward_id).css("padding", "10px");
        $('.reward_data' + reward_id).css("border-radius", "10px");
    }, function () {
        var reward_id = $(this).attr('data-id');
        $('.reward_data' + reward_id).css("background-color", "#ffffff");
    });
});

Chaging background color on hover using foreach

3 Answers3