如何在多个配对的 div 上应用 mouseenter/mouseleave

Question

我试图将鼠标悬停在 div 上并影响另一个。试了一下，但我的代码有点笨拙。有没有更短更好的方法来做到这一点？这是代码的简短版本，我需要再应用 70 次。// hover and highlight corresponding box$("#txt01").on({    mouseenter: function () {        $('#txt01').css('border-color', '#cc0000');        $('#img01').css('border-color', '#cc0000');    },    mouseleave: function () {        $('#txt01').css('border-color', '#0099ff');        $('#img01').css('border-color', 'transparent');    }});$("#txt02").on({    mouseenter: function () {        $('#txt02').css('border-color', '#cc0000');        $('#img02').css('border-color', '#cc0000');    },    mouseleave: function () {        $('#txt02').css('border-color', '#0099ff');        $('#img02').css('border-color', 'transparent');    }});$("#txt03").on({    mouseenter: function () {        $('#txt03').css('border-color', '#cc0000');        $('#img03').css('border-color', '#cc0000');    },    mouseleave: function () {        $('#txt03').css('border-color', '#0099ff');        $('#img03').css('border-color', 'transparent');    }});

Answer 1

假设您没有使用类（在本例中我强烈建议您使用类），您可以在 ID 旁边使用 ^ 来获取任何以 txt 开头的 ID。

$(document).ready(function() {

  $("[id^=txt]").on("mouseover", function(e) {

    var id = $(e.target).prop("id").replace("txt", "");

    $('#txt' + id).css('border-color', '#cc0000');

    $('#img' + id).css('border-color', '#cc0000');

  });

  $("[id^=txt]").on("mouseout", function(e) {

    var id = $(e.target).prop("id").replace("txt", "");

    $('#txt' + id).css('border-color', '#0099ff');

    $('#img' + id).css('border-color', 'transparent');

  });

});

div {

  border: 1px solid #000;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="txt01">10</div>

<div id="img01">01</div>

Answer 2

您可以使用 for 循环进行迭代。因为也许并非所有元素都存在，所以在我为它添加事件处理程序之前测试该元素是否存在if (elemTxt) { ... }。

备注： id 可以为这个 dynamical 构建。因为你有 01-09 并且迭代器 i 只有 1 个数字，所以我首先为此添加一个字符串“0”，然后添加该值，最后只从中取出最后 2 个字符。

for (let i=1; i<=70; i++) {

    let nr = ('0'+i).slice(-2);

    let elemTxt = $('#txt'+nr);

    let elemImg = $('#img'+nr);

    if (elemTxt) {

        elemTxt.on({

            mouseenter: function () {

                elemTxt.css('border-color', '#cc0000');

                elemImg.css('border-color', '#cc0000');

            },

            mouseleave: function () {

                elemTxt.css('border-color', '#0099ff');

                elemImg.css('border-color', 'transparent');

            }

       });

    }   

}

div, img { border: 1px solid red;}

img { height: 50px; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id='txt01'>Text 1</div>

<img id='img01' src='https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQIh1GvRa2-oH61PWTO_BA6aX6_BskpEIPkKA&usqp=CAU'>

<div id='txt02'>Text 1</div>

<img id='img02' src='https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQIh1GvRa2-oH61PWTO_BA6aX6_BskpEIPkKA&usqp=CAU'>

<div id='txt50'>Text 1</div>

<img id='img50' src='https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQIh1GvRa2-oH61PWTO_BA6aX6_BskpEIPkKA&usqp=CAU'>

Answer 3

你可以这样做：

mouseenter: function () {

    var id = $(this).attr("id").replace("txt","");

    $('#txt'+id).css('border-color', '#cc0000');

    $('#img'+id).css('border-color', '#cc0000');

}

这将从点击的 id 中删除该txt部分，因此我们只剩下数字。然后我们可以使用它来选择正确的对应 id。

// hover and highlight corresponding box

$("[id^=txt]").on({

    mouseenter: function () {

        var id = $(this).attr("id").replace("txt","");

        $('#txt'+id).css('border-color', '#cc0000');

        $('#img'+id).css('border-color', '#cc0000');

    },

    mouseleave: function () {

        var id = $(this).attr("id").replace("txt","");

        $('#txt'+id).css('border-color', '#0099ff');

        $('#img'+id).css('border-color', 'transparent');

    }

});