2013-08-22 42 views
0

我有這個頁面上市的人開發出來時,我的JavaScript功能不工作。當你點擊他們的名字時,我有另外一個部分用來保存那個人的內容。它一直工作正常,但現在我需要添加超過9人的名單。增加超過9元

當添加10元,你不能再點擊左邊的名稱和加載正確的人的信息。它被選中並跳轉到#1元素。我已經提供了下面的代碼,並鏈接到頁面上https://github.com/supasmo/Management-Testing

我需要更正此問題的幫助,所以我需要添加到列表中就可以採取儘可能多的人。在此先感謝您的任何建議。

JS

management = { 
    debug: true, 
    defaultItem: 1, 
    currentItem: 0, 
    bios: ".bios .bio", 
    bio: "#bio", 
    manager: ".managers div.bio", 
    managerLinks: ".managers a", 
    topLinks: ".bio a.top", 
    paging: ".bio .paging", 
    bioNames: ".bio h1", 
    yellowArrowSrc: "public/assets/common/arrow-link.png", 
    blueArrowSrc: "public/assets/common/arrow-link-blue.png", 

    init: function() { 
     this.log("management.init()"); 

     // count bios 
     this.bioCount = $(this.bios).length; 
     this.log("Found " + this.bioCount + " bios."); 

     // hide bios, names and "top" links, show paging links 
     $(this.bios).hide(); 
     $(this.topLinks).hide(); 
     $(this.bioNames).hide(); 
     $(this.paging).show(); 

     // show default item 
     this.showItem(this.defaultItem); 

     // adjust bio links 
     $(this.managerLinks).click(function(e) { 
      e.preventDefault(); 
      management.linkClick($(this).parent()); 
     }); 

     // enable next and prev clicks 
     $(this.paging + " .next").css("cursor", "pointer").click(function() { 
      management.nextClick(); 
     }); 
     $(this.paging + " .prev").css("cursor", "pointer").click(function() { 
      management.prevClick(); 
     }); 
    }, 

    prevClick: function() { 
     this.log("prevClick()"); 
     newItem = this.currentItem - 1; 
     if (newItem < 1) { 
      newItem = this.bioCount; 
     } 
     this.showItem(newItem); 
    }, 

    nextClick: function() { 
     this.log("nextClick()"); 
     newItem = this.currentItem + 1; 
     if (newItem > this.bioCount) { 
      newItem = 1; 
     } 
     this.showItem(newItem); 
    }, 

    linkClick: function(which) { 
     this.showItem(which.attr("class").substr(3, 1)); 
    }, 

    showItem: function(which) { 
     this.log("showItem(" + which + ")"); 
     if (which == this.currentItem) { 
      this.log("--> aborted: item is already showing"); 
     } else { 
      $(this.bio + this.currentItem).hide(); 
      $(this.bio + which).show(); 

      $(this.manager).removeClass("current"); 
      $(this.manager + which).addClass("current"); 

      $(this.manager + " img.arrow").attr("src", this.yellowArrowSrc); 
      $(this.manager + which + " img.arrow").attr("src", this.blueArrowSrc); 

      this.currentItem = which; 
     } 
    }, 

    log: function(message) { 
     if (this.debug) { 
      console.log(message); 
     } 
    }, 

    // ===== End of Object ===== 

    endOfObject: 1 
} 

$(document).ready(function() { 
    management.init(); 
}); 
+8

'this.showItem(which.attr( 「類」)SUBSTR(3,1));'的幻數,這是什麼意思(提示 - 後數字9是在基地10多個數字) – Ryan

+0

是看着HTML,minitech是正確的。他對元素進行了硬編碼,但也對子元素值進行了編碼。 – 2013-08-22 19:17:37

回答

2
this.showItem(which.attr("class").substr(3, 1)); 

本部分不超過一個數字工作,只是不這樣做,一般正確的方法,因爲班class順序不應該重要。最起碼,你應該使用一個數據屬性:

<div class="bio" data-bio="10"> 
this.showItem(which.data("bio")); 

如果你想成爲substringy,但是,你已經有了一個非常好的鏈接:

// adjust bio links 
$(this.managerLinks).click(function(e) { 
    management.linkClick(this); 
    e.preventDefault(); 
}); 
linkClick: function(which) { 
    this.showItem(which.getAttribute("href").match(/\d+/)[0]); 
},