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也在这里。

使用类而不是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; 
}

谢谢，作品，你也可以回答奖金问题吗？ – 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'); 
});

谢谢，作品，你也可以回答奖金问题吗？ – 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'); });"; 
?>

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

相关推荐