jquery - 使用jquery查找父div的id来引用var

Question

我是 jquery 的新手，所以请原谅我，如果这是一个简单的任务，但我在这里想做的是两方面的。我的页面上可以有 1 到 4 个显示面板，每个面板都有一个按钮。每个显示面板应该独立于其他面板运行，但显示与其他面板相同的内容(想象一本书，能够在每个面板中查看教科书的 4 个不同章节，并在一个面板中进行导航)不影响其他内容)。

我试图通过复制显示面板代码来实现这一点，但给每个面板一个不同的 id(即 panel1、panel2、panel3、panel4)，然后为每个面板提供相应的 jquery 对象(命名与显示面板的 id)。因此，当单击其中一个按钮时，我想找到父面板的 id 并将其用作我的对象的 var 名称(如果可能的话)。

这是我正在尝试做的事情的精简版本。按导航按钮，

<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>

我想找到距离 nav-button 最近的 div.display-panel 的 ID(在本例中为 panel1) .

然后我想在 jquery 中使用 id 作为 var 名称。我有以下内容:

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 运行它更好的方法？

Answer 1

我相信，如果您的标记结构未设置，并且按钮可能被其他标记包裹，那么最接近的()，提供选择器将是最好的选择，正如您在 jsfiddle 中看到的那样

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

$(function(){
        $('.nav-button').click(function (){
        var p = $(this).closest('div[class^="display-panel"]').attr('id');
        alert(p); 
    });
});