javascript - 添加超过 9 个元素时，我的 Javascript 函数无法正常工作

Question

我开发这个页面是为了列出人员。当您单击他们的名字时，我会构建另一个部分来保存该人的内容。它一直运行良好，但现在我需要将 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();
});

Answer 1

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

这部分不适用于多于一位的数字，并且通常不是正确的方法，因为 class 中类的顺序并不重要。至少，您应该使用数据属性:

<div class="bio" data-bio="10">

this.showItem(which.data("bio"));

如果你想变得更具体，你有一个非常好的链接:

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

linkClick: function(which) {
    this.showItem(which.getAttribute("href").match(/\d+/)[0]);
},