1

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

我试图通过复制显示面板代码来实现这一点，但给每个面板一个不同的 id（即 panel1、panel2、panel3、panel4），然后为每个面板设置相应的 jquery 对象（与显示面板）。因此，当单击其中一个按钮时，我想找到父面板的 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在本例中为panel1）的 id。

然后我想在 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 运行它更好的方法？

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