Question

我是jquery的新手，所以请原谅我这是一项简单的任务，但我在这里要做的事情是双重的。我的页面上可以有1到4个显示面板，每个面板都有一个按钮。每个显示面板应该独立于其他显示面板，但显示与其他显示面板相同的内容（想象一本书，并且能够在每个窗格中查看教科书的4个不同章节，导航在一个不影响他人的内容。）

我试图通过复制显示面板代码来实现这一点，但是给每个面板一个不同的id（即panel1，panel2，panel3，panel4），然后为每个面板提供相应的jquery对象（命名与显示面板的ID）。那么当单击其中一个按钮时，我想找到父面板的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最接近的nav-button的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); 
    });
});

Answer 2

为什么不在displayPanel函数中附加click事件，而不是在document.ready事件期间？在那里，你已经知道你在哪个面板，所以你没有问题找到它的ID。然后，您从document.ready事件中调用每个displayPanel，一切都应该正常工作。

使用jquery查找父div的id以引用var

2 个答案: