jQuery apply same functionality to different divs

Question

I want to have 10 divs that when someone click on each of them or hover by any of them it will change. What I now have is a foreach from the php (goes over the array of stuff I want to show) and writes a script to each in a similar manner, with the only difference being the id of the div:

<?php 
        foreach($lines as $line) {
            $lineId = $line->getId();
            echo "$('#translation$lineId').hover(
                function() { $('#translation$lineId').css('background-color', 'yellow'); },
                function() { $('#translation$lineId').css('background-color', 'transparent'); });";
            echo "$('#translation$lineId').focusin(function()
                            { $('#translation$lineId').css('background-color', 'red'); });";
            echo "$('#translation$lineId').focusout(function()
                            { $('#translation$lineId').css('background-color', 'transparent'); });";
        }
    ?>

In the browser it can get to hundreds of lines of code when the number of $lines is big. Is there a better way? I want to use JQuery for that.

Another bonus question is how do I do in Jquery that when somebody clicks on a div it makes it red and when someone unclicks it (clicks somewhere else) it becomes transparent again. It is somewhat what I tried to do in my code. Jquery here too.

Using a class instead of IDs will help you a lot: http://www.w3schools.com/tags/att_standard_class.asp — m90, Dec 22 '11 at 14:57

Alex Coplan · Accepted Answer · 2011-12-22T17:05:50.847

4

Why not use a class instead?

Markup:

<div id="div1" class="mydivclass">Something</div>
<div id="div2" class="mydivclass">Something Else</div>

Script:

$(document).ready(function() {
    $('.mydivclass').click(function() {
        $(this).doSomething();
    });
 });

Bonus Question to make div red when you click on it and transparent when you click elsewhere...

$(document).ready(function() {
    $('html').click(function(event) {
        $('.mydivclass').each(function() {
            if ($(event.target).closest(this).length) {
                $(this).css('background-color','red');
            }
            else {
                $(this).css('background-color','rgba(0,0,0,0)');
            }
        });
    });
});

For hover just use the :hover css pseudo-class

.mydivclass {
    background-color:rgba(0,0,0,0);
}
.mydivclass:hover {
    background-color:red;
}

edited Dec 22 '11 at 17:05

answered Dec 22 '11 at 14:55

Alex Coplan

13,211
19
77
138

How would I do it for several divs? I want to do the same as I did for the first question. Maybe with .each? Can't make it work. Thanks. – Vadiklk Dec 22 '11 at 16:58
It doesn't work for some reason, can you investigate into it? – Vadiklk Dec 22 '11 at 17:14
Tells me that c.replace is not a function – Vadiklk Dec 22 '11 at 17:15
@Vadiklk do you mean you want to be able to select multiple divs at the same time? – Alex Coplan Dec 22 '11 at 17:15
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/6066/discussion-between-alex-coplan-and-vadiklk) – Alex Coplan Dec 22 '11 at 17:17
fixed, was using an older v of jquery which didn't support `.closest` – Alex Coplan Dec 22 '11 at 17:38

score 1 · Answer 2 · answered Dec 22 '11 at 14:58

There are a number of things that can be done better:

1) Don't mix JavaScript into your PHP code, even in your example you could make a function that takes an id as a param
2) Cache your jQuery selectors, for example:

var $translation3 = $('#translation3');

$translation3.hover(
  function() { $translation3.css('background-color', 'yellow'); },
  function() { $translation3.css('background-color', 'transparent'); 
});

3) The most important thing you can do to optimize things is to assign a class to those lines, for example 'translation':

var $translation = $('.translation');

$translation.hover(function() {
  function() { $(this).css('background-color', 'yellow'); },
  function() { $(this).css('background-color', 'transparent');  
});

Check this out: http://stackoverflow.com/questions/1423671/jquery-click-off-element-event — alessioalex, Dec 22 '11 at 15:14

score 1 · Answer 3 · answered Dec 22 '11 at 15:10

You can use jquery class selector instead of Id. if you give all transactionLines the same class name, you can access hover event for all transactionLines divs.

So you dont need foreach by this way.

transactionLine1 transactionLine2

...

<?php 
        echo "$('.yourClassNameHere').hover(
            function() { $(this).css('background-color', 'yellow'); },
            function() { $(this).css('background-color', 'transparent'); });";
        echo "$('.yourClassNameHere').focusin(function()
                        { $(this).css('background-color', 'red'); });";
        echo "$('.yourClassNameHere').focusout(function()
                        { $(this).css('background-color', 'transparent'); });";
?>

jQuery apply same functionality to different divs

3 Answers3