показать и скрыть элементы на основе атрибута data- *

Question

Похоже, что это должно быть тривиально для JQuery, но эта функция скрывает всю форму ... может кто-то направить меня в правильном направлении?

$('form')
        .children()
        .filter(function(){
            return $(this).data('show', 'pro')
        })
        .show();
$('form')
         .children()
         .filter(function(){
             return $(this).data('show', 'home')
         })
         .hide();

Answer 1

Вы передаете 2 аргумента методу data , тем самым устанавливая его вместо получения старого значения.

Используйте это вместо:

$('form')
        .children()
        .filter(function(){
            return $(this).data('show') === 'pro';
        })
        .show();
$('form')
         .children()
         .filter(function(){
             return $(this).data('show') === 'home';
         })
         .hide();

Вы также можете кэшировать свой селектор для производительности (или использовать end).

Answer 2

Если значения показа данных есть в вашем HTML или установлены как атрибуты для каждого объекта, вы можете сделать это полностью с помощью селектора:

$('form > [data-show="pro"]').show();
$('form > [data-show="home"]').hide();

Для пояснения:

• form явно выбирает элементы формы
• > выбирает дочерний элемент объекта формы
• [data-show="pro"] выбирает только дочерние элементы с атрибутом с именем data-show, для которого установлено значение "pro"
• .show() вызывает метод show для этих выделенных объектов

Если ваши значения для показа данных установлены с помощью метода jquery .data(), поэтому предыдущий метод не будет работать, тогда вам лучше установить состояние как имя класса, а не как значение данных, которое вы можете более легко использовать в селектор. Если бы эти значения были заданы как имена классов, а не данные, код выглядел бы так:

$('form > .pro').show();
$('form > .home').hide();

Помните, у вас может быть несколько имен классов в объекте и состоянии объекта, которое непосредственно используется для управления представлением объекта (стили CSS, видимость, форматирование и т. Д.), Намного лучше представлять в виде имен классов а не атрибуты data-xxx, потому что его гораздо проще использовать в селекторах для операций CSS или jQuery.

Answer 3

не совсем уверен, что вы пытаетесь сделать из кода.

для доступа к "data-" с помощью JQ, я использую:

$(elementSelector).attr('data-XXX');

, где data-XXX - это атрибуттега.Это работает во всех браузерах до IE7, который я видел.