jQueryは異なるdivに同じ機能を適用します

Question

私は10人のdivを持ちたいと思います。誰かがそれぞれをクリックしたり、いずれかでクリックすると変更されます。私が今持っていることは、PHP（私が見せたいもののアレイの上に行く）からのforeachであり、唯一の違いは、div要素のIDであることで、同様の方法でそれぞれにスクリプトを書き込みます

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

ブラウザでは、$行の数が多いときに数百行のコードを取得できます。 良い方法がありますか？私はそのためにJQueryを使用したいと思います。

もう1つのボーナス問題は、誰かがdivをクリックすると赤くなり、他の人がそれをクリックして（別の場所をクリックすると）再び透明になるというJqueryのやり方です。私のコードでやろうとしたことです。ここでもJquery。

Answer 1

代わりにクラスを使用してみませんか？

マークアップ：

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

スクリプト：あなたが他の場所でクリックしたとき、あなたがそれと透明をクリックするとdivの赤を作るために

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

---

ボーナス質問...

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

ホバーの場合は、:hoverのCSSの擬似クラス

行うことができるものがいくつかあります

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

Answer 2

よりよい：

1）あなたは機能を作ることができるとしても、あなたの例では、あなたのPHPコードにはJavaScriptを混在させないでくださいという例えば、あなたのjQueryのセレクタをキャッシュ）のparam
2としてIDを取ります：あなたは、物事を最適化するために行うことができます最も重要なことは、例えば、これらの行にクラスを割り当てることです）

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

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

3「翻訳'：

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

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

Answer 3

Idではなくjqueryクラスセレクタを使用できます。すべてのtransactionLinesに同じクラス名を指定すると、すべてのtransactionLines divのホバーイベントにアクセスできます。

このようにforeachを必要としません。

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