jQuery的適用相同的功能，以不同的div

我想有10個div的，當有人點擊他們每個人或懸停其中任何會改變。我現在已經是從PHP（雲的東西，我想展示在陣列上）一個foreach和以類似的方式寫了一個劇本給每個，唯一的區別是div的ID：jQuery的適用相同的功能，以不同的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'); });"; 
     } 
    ?>

在瀏覽器中，當$行數很大時，它可以獲得數百行代碼。有沒有更好的方法？我想爲此使用JQuery。

另一個好處的問題是我怎麼做jQuery的，當有人點擊一個div它使紅色和當有人unclicks它（點擊了其他位置）再次變得透明。這是我在代碼中試圖做的。 Jquery也在這裏。

來源

2011-12-22 Vadiklk

使用類而不是ID將幫助你很多：http://www.w3schools.com/tags/att_standard_class.asp – m90 2011-12-22 14:57:20

爲什麼不使用類呢？

標記：

<div id="div1" class="mydivclass">Something</div> 
<div id="div2" class="mydivclass">Something Else</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; 
}

來源

2011-12-22 14:55:57

謝謝，作品，你也可以回答獎金問題嗎？ – Vadiklk 2011-12-22 15:12:19

是的，看到更新 – 2011-12-22 15:41:26

我該怎麼做幾個div？我想和第一個問題一樣。可能與.each？無法使其工作。謝謝。 – Vadiklk 2011-12-22 16:58:41

有許多事情是可以做的更好：

1）不要混用的JavaScript到你的PHP代碼，甚至在你的榜樣，你可以做一個函數有一個id爲PARAM
2）高速緩存的jQuery選擇，例如：

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

來源

2011-12-22 14:58:01 alessioalex

謝謝，作品，你也可以回答獎金問題嗎？ – Vadiklk 2011-12-22 15:12:41

看看這個：http://stackoverflow.com/questions/1423671/jquery-click-off-element-event – alessioalex 2011-12-22 15:14:24

您可以使用jquery類選擇器而不是Id。如果您爲所有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'); });"; 
?>

來源

2011-12-22 15:10:46 tmesebasi

jQuery的適用相同的功能，以不同的div

回答

相關問題