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

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

Jquery - 如何為多個(gè)元素綁定單擊事件?

Jquery - 如何為多個(gè)元素綁定單擊事件?

慕田峪7331174 2023-10-04 14:30:58
我使用 jquery 為圖像制作動(dòng)畫(huà),以制作混合圖像,單擊時(shí)滾動(dòng)不同部分。我想過(guò)這樣做$("#head").click(function () {        if (headclix < 9) {            $("#head").animate({                left: "-=367px"            }, 500);            headclix++;        } else {            $("#head").animate({                left: "0px"            }, 500);            headclix = 0;        }    });    $("#eyes").click(function () {        if (eyeclix < 9) {            $("#eyes").animate({                left: "-=367px"            }, 500);            eyeclix++;        } else {            $("#eyes").animate({                left: "0px"            }, 500);            eyeclix = 0;        }    });    $("#nose").click(function () {        if (noseclix < 9) {            $("#nose").animate({                left: "-=367px"            }, 500);            noseclix++;        } else {            $("#nose").animate({                left: "0px"            }, 500);            noseclix = 0;        }    });    $("#mouth").click(function () {        if (mouthclix < 9) {            $("#mouth").animate({                left: "-=367px"            }, 500);            mouthclix++;        } else {            $("#mouth").animate({                left: "0px"            }, 500);            mouthclix = 0;        }    });我希望有更好的方法我想我可以為班級(jí)和每個(gè)班級(jí)做一些事情,但不知道如何讓它發(fā)揮作用。需要將其設(shè)為點(diǎn)擊事件并跟蹤每個(gè)圖像部分$(".face").each(function (i) {        if (i < 9) {            $(".face").parent().animate({                left: "-=367px"            }, 500);            i++;        } else {            $(".face").parent().animate({                left: "0px"            }, 500);            i = 0;        }    });HTML:<div id="pic_box">                <div id="head" class="face"><img src="images/headsstrip.jpg"></div>                <div id="eyes" class="face"><img src="images/eyesstrip.jpg"></div>                <div id="nose" class="face"><img src="images/nosesstrip.jpg"></div>                <div id="mouth" class="face"><img src="images/mouthsstrip.jpg"></div>  </div>此鏈接中的圖像將使您了解該功能
查看完整描述

1 回答

?
白板的微信

TA貢獻(xiàn)1883條經(jīng)驗(yàn) 獲得超3個(gè)贊

您可以創(chuàng)建一個(gè)面部對(duì)象來(lái)保存每個(gè)面部部件的點(diǎn)擊計(jì)數(shù),還可以創(chuàng)建一個(gè)處理點(diǎn)擊事件的函數(shù)(下面名為 clickHandler)。clickHandler 接受id并在具有該 的元素上調(diào)用適當(dāng)?shù)膭?dòng)畫(huà)函數(shù)id。


檢查如下:


var face = {

  "headClicks" : 0,

  "eyesClicks" : 0,

  "noseClicks" : 0,

  "mouthClicks" : 0,

  "clickHandler" : function(id) {

    if(this[id+"Clicks"] < 9) {

      animateLeft367(id);

      this[id+"Clicks"]++;

    } else {

      animateLeft0(id);

      this[id+"Clicks"] = 0;

    }

  }

}


function animateLeft367(id) {

  $("#" + id).animate({left: "-=367px"}, 500);

  console.log('animated ' + id + ' 367');

}


function animateLeft0(id) {

  $("#" + id).animate({left: "0px"}, 500);

  console.log('animated ' + id + ' 0');

}



$(".face").click(function() {

  face.clickHandler(this.id);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div id="pic_box">

    <div id="head" class="face"><img src="images/headsstrip.jpg"></div>

    <div id="eyes" class="face"><img src="images/eyesstrip.jpg"></div>

    <div id="nose" class="face"><img src="images/nosesstrip.jpg"></div>

    <div id="mouth" class="face"><img src="images/mouthsstrip.jpg"></div>

</div>


查看完整回答
反對(duì) 回復(fù) 2023-10-04
  • 1 回答
  • 0 關(guān)注
  • 137 瀏覽

添加回答

舉報(bào)

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

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

公眾號(hào)

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