如何在多个配对的 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() {&nbsp; $("[id^=txt]").on("mouseover", function(e) {&nbsp; &nbsp; var id = $(e.target).prop("id").replace("txt", "");&nbsp; &nbsp; $('#txt' + id).css('border-color', '#cc0000');&nbsp; &nbsp; $('#img' + id).css('border-color', '#cc0000');&nbsp; });&nbsp; $("[id^=txt]").on("mouseout", function(e) {&nbsp; &nbsp; var id = $(e.target).prop("id").replace("txt", "");&nbsp; &nbsp; $('#txt' + id).css('border-color', '#0099ff');&nbsp; &nbsp; $('#img' + id).css('border-color', 'transparent');&nbsp; });});div {&nbsp; 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++) {&nbsp; &nbsp; let nr = ('0'+i).slice(-2);&nbsp; &nbsp; let elemTxt = $('#txt'+nr);&nbsp; &nbsp; let elemImg = $('#img'+nr);&nbsp; &nbsp; if (elemTxt) {&nbsp; &nbsp; &nbsp; &nbsp; elemTxt.on({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; mouseenter: function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; elemTxt.css('border-color', '#cc0000');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; elemImg.css('border-color', '#cc0000');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; mouseleave: function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; elemTxt.css('border-color', '#0099ff');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; elemImg.css('border-color', 'transparent');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp;});&nbsp; &nbsp; }&nbsp; &nbsp;}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 () {&nbsp; &nbsp; var id = $(this).attr("id").replace("txt","");&nbsp; &nbsp; $('#txt'+id).css('border-color', '#cc0000');&nbsp; &nbsp; $('#img'+id).css('border-color', '#cc0000');}这将从点击的 id 中删除该txt部分，因此我们只剩下数字。然后我们可以使用它来选择正确的对应 id。// hover and highlight corresponding box$("[id^=txt]").on({&nbsp; &nbsp; mouseenter: function () {&nbsp; &nbsp; &nbsp; &nbsp; var id = $(this).attr("id").replace("txt","");&nbsp; &nbsp; &nbsp; &nbsp; $('#txt'+id).css('border-color', '#cc0000');&nbsp; &nbsp; &nbsp; &nbsp; $('#img'+id).css('border-color', '#cc0000');&nbsp; &nbsp; },&nbsp; &nbsp; mouseleave: function () {&nbsp; &nbsp; &nbsp; &nbsp; var id = $(this).attr("id").replace("txt","");&nbsp; &nbsp; &nbsp; &nbsp; $('#txt'+id).css('border-color', '#0099ff');&nbsp; &nbsp; &nbsp; &nbsp; $('#img'+id).css('border-color', 'transparent');&nbsp; &nbsp; }});