第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

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

如何在多個配對的 div 上應(yīng)用 mouseenter/mouseleave

如何在多個配對的 div 上應(yīng)用 mouseenter/mouseleave

智慧大石 2022-12-29 16:22:58
我試圖將鼠標(biāo)懸停在 div 上并影響另一個。試了一下，但我的代碼有點笨拙。有沒有更短更好的方法來做到這一點？這是代碼的簡短版本，我需要再應(yīng)用 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貢獻(xiàn)1858條經(jīng)驗 獲得超8個贊

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


查看完整回答
反對 回復(fù) 2022-12-29
?
墨色風(fēng)雨

TA貢獻(xiàn)1853條經(jīng)驗 獲得超6個贊

您可以使用 for 循環(huán)進(jìn)行迭代。因為也許并非所有元素都存在，所以在我為它添加事件處理程序之前測試該元素是否存在if (elemTxt) { ... }。


備注： id 可以為這個 dynamical 構(gòu)建。因為你有 01-09 并且迭代器 i 只有 1 個數(shù)字，所以我首先為此添加一個字符串“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'>


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

TA貢獻(xiàn)1806條經(jīng)驗 獲得超8個贊

你可以這樣做：


mouseenter: function () {

    var id = $(this).attr("id").replace("txt","");

    $('#txt'+id).css('border-color', '#cc0000');

    $('#img'+id).css('border-color', '#cc0000');

}

這將從點擊的 id 中刪除該txt部分，因此我們只剩下數(shù)字。然后我們可以使用它來選擇正確的對應(yīng) 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');

    }

});


查看完整回答
反對 回復(fù) 2022-12-29
  • 3 回答
  • 0 關(guān)注
  • 197 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號