亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

如何在多個配對的 div 上應用 mouseenter/mouseleave

如何在多個配對的 div 上應用 mouseenter/mouseleave

智慧大石 2022-12-29 16:22:58
我試圖將鼠標懸停在 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');    }});
查看完整描述

3 回答

?
猛跑小豬

TA貢獻1858條經驗 獲得超8個贊

假設您沒有使用類（在本例中我強烈建議您使用類），您可以在 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>


查看完整回答
反對 回復 2022-12-29
?
墨色風雨

TA貢獻1853條經驗 獲得超6個贊

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


查看完整回答
反對 回復 2022-12-29
?
慕森卡

TA貢獻1806條經驗 獲得超8個贊

你可以這樣做：


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

    }

});


查看完整回答
反對 回復 2022-12-29
  • 3 回答
  • 0 關注
  • 186 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號