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

如何解决如何在多个成对的div上应用mouseenter / mouseleave

我试图将鼠标悬停在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',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',mouseleave: function () {
        $('#txt03').css('border-color','#0099ff');
        $('#img03').css('border-color','transparent');
    }
});

解决方法

您可以执行以下操作：

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",'#0099ff');
        $('#img'+id).css('border-color','transparent');
    }
});

,

假设您不使用类，在这种情况下，我强烈建议您使用类，您可以在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",'#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>

,

您可以使用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'>