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

【问题标题】：How to apply mouseenter/mouseleave on multiple paired divs如何在多个配对 div 上应用 mouseenter/mouseleave
【发布时间】：2020-08-10 20:29:11
【问题描述】：

我试图将鼠标悬停在 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');
    }
});

【问题讨论】：

如果你有一个工作代码的例子，你问是否有办法让它变得更好，那么这个问题属于codereview.stackexchange.com，而不是 Stack Overflow。
需要相应的 html 代码

标签： javascript html jquery arrays jquery-hover

【解决方案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>

【讨论】：

感谢所有回复并帮助我的人，您的所有代码都运行良好！我选择了这个，因为它最简单，更短。再次感谢！

【解决方案2】：

你可以这样做：

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

【讨论】：

【解决方案3】：

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

备注： id可以为此动态构建。因为你有 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'>

【讨论】：