0

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

1 回答 1

2 
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]);
},
于 2013-08-22T19:23:33.460 回答