jQuery предназначается только для элементов в родительском div - PullRequest
Новая
       11

jQuery предназначается только для элементов в родительском div

0 голосов
/ 16 декабря 2011

У меня есть несколько виджетов на странице, и я хочу повторно использовать классы повсюду.У меня есть значок вопросительного знака, который должен переключать видимость между 2 делителями внутри виджета.

Проблема в том, что я не могу получить свой код, предназначенный только для текущего виджета.Я попробовал обычные методы, но, похоже, ни один из них не работает здесь.

Скрипка здесь, http://jsfiddle.net/clintongreen/9hvVn/

Рассматриваемая функция щелчка работает от значка вопросительного знака.Для div, которым требуется toggleClass, являются .widget-content и .widget-content_next

Спасибо:)

Ответы [ 3 ]

3 голосов
/ 16 декабря 2011

Вы можете использовать родителя в сочетании с братьями и сестрами 

$("a.expand_widget").live("click", function () {
    $(this).parent().siblings(".widget-content").toggleClass("hidden");
    $(this).parent().siblings(".widget-content_next").toggleClass("hidden");
});

http://jsfiddle.net/KKMaW/

или вы можете ограничить селектор родительскими узлами 

$("a.expand_widget").live("click", function () {
    var root = this.parentNode.parentNode;
    $(".widget-content",root).toggleClass("hidden");
    $(".widget-content_next",root).toggleClass("hidden");
});
3 голосов
/ 16 декабря 2011

widget-content и widget-content_next не являются прямыми предками ссылки, я думаю, вы хотите что-то вроде этого: 

 $(this).closest(".widget").find('.widget-content').toggleClass("hidden");
 $(this).closest(".widget").find(".widget-content_next").toggleClass("hidden");
2 голосов
/ 16 декабря 2011

Я не думаю, что метод .closest работает для вас, потому что он находит только предков, а не братьев и сестер или потомков предков:

Учитывая объект jQuery, который представляет набор элементов DOM, метод .closest () просматривает эти элементы и их предков в дереве DOM и создает новый объект jQuery из соответствующих элементов. Методы .parents () и .closest () похожи в том, что они оба проходят по дереву DOM.

Решение

Вместо использования .closest вы можете использовать функцию .parent , чтобы найти владельца, а затем использовать другие функции обхода дерева , чтобы найти потомков, которые соответствуют определенным селекторам .

Попробуйте этот отредактированный код - http://jsfiddle.net/9hvVn/3/:

$("a.expand_widget").live("click", function () {
    var parentWidget = $(this).parent('div.widget-head')
        .parent('li.widget');
    parentWidget.children(".widget-content").toggleClass("hidden");
    parentWidget.children(".widget-content_next").toggleClass("hidden");
});

Это довольно строгое, но вы можете немного ослабить его, если вам нужно. Вы также можете использовать различные функции-братья в div.widget-head вместо того, чтобы сначала получить родитель-родитель.

...