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]);
},

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

1 个答案: