如何在多个配对的 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

你可以这样做：

mouseenter: function () {
    var id = $(this).attr("id").replace("txt","");
    $('#txt'+id).css('border-color', '#cc0000');
    $('#img'+id).css('border-color', '#cc0000');
}

这将从点击的 ID 中删除 txt 部分，因此我们只剩下数字。那我们就可以用select正确对应的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');
    }
});

Answer 2

假设您没有使用类，在这种情况下我强烈建议您使用 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 3

您可以使用 for-loop 进行迭代。因为也许并非所有元素都存在，所以在我为其添加事件处理程序之前测试该元素是否存在 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'>

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

How to apply mouseenter/mouseleave on multiple paired divs

html

javascript

arrays

jquery

jquery-hover