Использование jquery для поиска идентификатора родительского div для ссылки на var

Я новичок в jquery, так что простите меня, если это простая задача, но то, что я пытаюсь сделать здесь, двоякое. На моей странице может быть от 1 до 4 панелей отображения, и на каждой панели есть кнопка. Предполагается, что каждая из панелей дисплея действует независимо от других, но отображает то же содержимое, что и другие (подумайте о книге и возможности просмотра 4 разных глав учебника в каждой из панелей с навигацией в одной). не затрагивая содержание другого).

Я пытаюсь добиться этого, дублируя код панели дисплея, но присваивая каждой панели другой идентификатор (например, панель1, панель2, панель3, панель4), а затем имея соответствующие объекты jquery для каждой панели (названные так же, как идентификаторы панели дисплея). Итак, когда одна из кнопок нажата, я хочу найти идентификатор родительской панели и использовать его как имя переменной для моего объекта (если это возможно).

Вот урезанная версия того, что я пытаюсь сделать. Нажав 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).

Затем я хочу использовать идентификатор в качестве имени переменной в 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, а затем запустить его через if-else?


jquery parent closest
person Belizzle    schedule 14.11.2013    source источник

Ответы (2)


arrow_upward
5
arrow_downward

Я считаю, что если структура вашей разметки не установлена, и кнопка может быть обернута другой разметкой, ближайший(), снабженный селектором, будет лучшим вариантом, как вы можете видеть в jsfiddle

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

$(function(){
        $('.nav-button').click(function (){
        var p = $(this).closest('div[class^="display-panel"]').attr('id');
        alert(p); 
    });
});
person Sibbo    schedule 14.11.2013
comment
Это отлично работает для возврата идентификатора, но как мне тогда связать этот идентификатор с соответствующим объектом? - person Belizzle; 19.11.2013

arrow_upward
0
arrow_downward

Почему бы вам не прикрепить событие клика внутри функции displayPanel, а не во время события document.ready? Там вы уже знаете, на какой панели вы находитесь, поэтому у вас нет проблем с поиском ее идентификатора. Затем вы вызываете каждую панель displayPanel из события document.ready, и все должно работать нормально.

person delCano    schedule 14.11.2013
comment
Как связать объект displayPanel в jquery с данной панелью отображения? - person Belizzle; 14.11.2013
comment
Вы уже делаете (хотя в вашем коде есть несколько дополнительных кавычек): $("#panel"+this.panelNumber) - person delCano; 14.11.2013
comment
Чтобы убедиться, что я вас понимаю, вы говорите, что событие щелчка внутри тела объекта? (Как я уже сказал в своем посте, я новичок в jquery, поэтому, пожалуйста, извините мое невежество здесь) Если я помещаю вызов в тело объекта и инициализирую 4 объекта, когда я нажимаю одну из кнопок, как это связано с одним из этих 4 объектов? - person Belizzle; 15.11.2013
comment
Посмотрим, правильно ли я понял. Я не проверяю, но это будет моя первая попытка: function displayPanel(panelNumber, curContent) { ... var panel = $(#panel + this.panelNumber); this.AdvanceContent = function() { ... } panel.find(.body-text).load(...); ... } panel.find(.advance-content).click(function() { panel.AdvanceContent(); }); } Редактировать: извините, я не могу заставить эту штуку принимать мои 4 пробела в качестве блока кода. Я новичок в StackOverflow, что я делаю не так? - person delCano; 17.11.2013