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

在浏览器中，当$ lines的数量很大时，它可以获得数百行代码。有没有更好的办法？我想使用JQuery。

另一个额外的问题是我如何在Jquery中做到，当有人点击div时它会变成红色，当有人取消它时（点击其他地方）它再次变得透明。这是我在我的代码中尝试做的一些事情。 Jquery也在这里。

Answer 1

为什么不改用课程？

标记：

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

脚本：

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

奖金问题，点击它时div红色，点击其他地方透明...

$(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）不要将JavaScript混合到PHP代码中，即使在您的示例中，您也可以创建一个将id作为参数的函数
2）缓存你的jQuery选择器，例如：

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

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

3）你可以做的最重要的事情是为这些行分配一个类，例如'translation'：

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

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

Answer 3

您可以使用jquery类选择器而不是Id。如果为所有transactionLines提供相同的类名，则可以访问所有transactionLines div的hover事件。

所以你不需要这样做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

3 个答案: