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.

Answer 1

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;
}

Answer 2

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');  
});

Answer 3

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'); });"; ?>