1

私は jquery を初めて使用するので、これが単純な作業である場合はご容赦ください。ただし、ここでやろうとしていることは 2 つあります。マイページには 1 ～ 4 個の表示パネルを配置でき、各パネルにはボタンがあります。各表示パネルは、他のパネルとは独立して動作するはずですが、他のパネルと同じコンテンツを表示します (本を考えてみてください。教科書の 4 つの異なる章を各パネルで表示し、1 つのパネルでナビゲーションを行うことができます)。別のコンテンツには影響しません)。

ディスプレイ パネルのコードを複製することでこれを達成しようとしていますが、各パネルに異なる ID (つまり、panel1、panel2、panel3、panel4) を与え、各パネルに対応する jquery オブジェクト (の id と同じ名前) を設定します。表示パネル）。そのため、ボタンの 1 つがクリックされたときに、親パネルの ID を見つけて、それをオブジェクトの var 名として使用したいと考えています (可能な場合)。

これが私がやろうとしていることの簡素化されたバージョンです。nav-button、_

<div class="other-stuff">
    <div id="pane11" class="display-panel">
        <div class="row">
            <div class="nav">
                <button type="button" class="nav-button">Button</button>
            </div>
        </div>
    </div>
</div>

div.display-panelに最も近いのID を見つけたいnav-button(この場合はpanel1)。

次に、idをjqueryの変数名として使用したいと考えています。私は次のものを持っています：

var panel1 = displayPanel(1, 1);
var panel2 = displayPanel(2, 1);
var panel3 = displayPanel(3, 1);
var panel4 = displayPanel(4, 1);

function displayPanel(panelNumber, curContent) {
    this.panelNumber = panelNumber;
    this.curContent= curContent;

    this.AdvanceContent = AdvanceContent;
    function AdvanceContent() {
        if ((this.curContent + 1) <= contentList.length - 1) {
            this.curContent++;
        } else {
            this.ResetContent();
        }
        $("#panel" + this.panelNumber).find(".body-text").load('html/' + contentList[this.curContent] + '.html');
    }

    this.ResetContent= ResetContent;
    function ResetContent() {
        this.curContent = 0;
        $("#panel" + this.panelNumber).find(".body-text").load('html/' + contentList[this.curContent] + '.html');
    }
}

そして、この疑似スクリプトのようなことをしたい:

$(document).ready(function () {
    $(".advance-content").click(function() {
        var panel = existing displayPanel with name matching id of parent displayPanel;
        panel.AdvanceContent();
    });
});

親のdisplayPanel idを見つけて、if-elseで実行するよりも良い方法はありますか?

4

2 に答える 2

5

マークアップの構造が設定されておらず、ボタンが他のマークアップに最も近い()でラップされている可能性がある場合、jsfiddleでわかるように、セレクターを提供することが最良のオプションになると思います

http://jsfiddle.net/isibbot/V8wr2/

$(function(){
        $('.nav-button').click(function (){
        var p = $(this).closest('div[class^="display-panel"]').attr('id');
        alert(p); 
    });
});
于 2013-11-14T15:54:33.950 に答える
0

displayPanelイベント中ではなく、関数内にクリックイベントを付けてみませんdocument.readyか？そこでは、自分がどのパネルにいるのかがすでにわかっているので、その ID を見つけるのに問題はありません。次に、document.ready イベントから各 displayPanel を呼び出すと、すべてが正常に機能するはずです。

于 2013-11-14T15:40:37.867 に答える