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 に答える