鍍金池/ 問答/HTML/ 簡(jiǎn)易輪播圖屬性綁定,通過按鈕找到我是第幾張圖片,屬性綁定是怎么實(shí)現(xiàn)的。

簡(jiǎn)易輪播圖屬性綁定,通過按鈕找到我是第幾張圖片,屬性綁定是怎么實(shí)現(xiàn)的。

在 anniuzhi[i].zz = i 這里我是不明白,怎么綁定到第幾張圖片上的?用this是為了干嘛?圖片描述

效果如下 ↓ 我鼠標(biāo)移到第幾個(gè)按鈕,圖片也隨之切換。通過屬性綁定來確定我是第幾個(gè)圖片,屬性綁定這里自己還有點(diǎn)模糊。
圖片描述

回答
編輯回答
陌離殤

117行,把zz綁在按鈕上了,事件觸發(fā)的時(shí)候讀取zz就知道是第幾個(gè)了

2018年3月31日 11:07
編輯回答
舊城人

其實(shí)比較簡(jiǎn)單,我舉個(gè)例子,像我寫這種的話一般都是通過在元素上綁定 data-id 來實(shí)現(xiàn)的。其實(shí)屬性綁定在哪里不重要,重要的是怎么去設(shè)定屬性可以讓你自己好用一點(diǎn),不一定要跟別人一樣的。

$('.target-li').on("mouseover",function(){
    var $id = $(this).attr("data-id"); //這里其實(shí)就獲取了對(duì)應(yīng)屬性
    //然后把$id傳到對(duì)應(yīng)的函數(shù)中去就行了
    doSomething($id);
});
2017年4月21日 18:14
編輯回答
凹凸曼

我們知道for循環(huán)是針對(duì)于 全局的,因?yàn)檩啿D的做法很多再次我采用我的方法幫你解讀下:
olis[0].className="current";

  //做換亮點(diǎn)的效果
  for(var j=0;j<olis.length;j++){
      //j是一個(gè)數(shù)組的下標(biāo) 取下標(biāo) 在事件中返回的第一個(gè)下標(biāo)是10 所以要在一開始給他賦值 
    olis[j].index=j;
      olis[j].onclick=function(){
          //j通過下標(biāo)給每一個(gè)值添加下標(biāo)
          //olis[i]給他一個(gè)j                     
          for(var i=0;i<olis.length;i++){
              olis[i].className="";//循環(huán)清空className
              ulis[i].style.display="none";//隱藏 
          }
          olis[this.index].className="current";//className定義給他高亮 
          //滿足高亮的時(shí)候ulis出現(xiàn),出現(xiàn)的同時(shí)之前的要隱藏
          ulis[this.index].style.display="block";//出現(xiàn) 那個(gè)圖片 下標(biāo)關(guān)聯(lián)
          count=this.index;//下標(biāo)為幾?把count和下標(biāo)綁定
          console.log(this.index);//this.index 
      }
  }

你說的this應(yīng)該是這部分內(nèi)容,如果此處不用this的話 因?yàn)槲覀兪茄h(huán)給每個(gè)綁定的點(diǎn)擊事件,樓主可以試下再末尾console.log代碼看看打印結(jié)果, 如果我們?cè)谥鞍衙總€(gè)元素的下標(biāo)賦值給arr[i]的index屬性的話最后我們可以通過屬性值來解決下標(biāo)由于循環(huán)產(chǎn)生的問題。

2017年5月6日 06:49