Передовой опыт (jQuery, CSS): как инициализировать скрытые элементы, которые будут переключаться между видимыми?

Стек предупреждает меня, что это субъективный вопрос, и, вероятно, он будет близок, но я все равно попробую.

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

Должны ли эти кнопки быть скрыты в таблице стилей или оставаться видимыми и скрываться jQuery при загрузке? Я хочу изящной деградации, поэтому кажется, что инициализация этого в CSS - плохая идея, если я хочу, чтобы они были видны, если javascript не включен.

Кроме того, я использую Ajax для загрузки страниц с этими изображениями. Если я сделаю это, используя скрытие jQuery, это не повлияет на те, которые загружаются из запроса ajax, поскольку оно срабатывает только при $(document).ready(). Я пытался использовать live('ready'), но узнал, что это событие не поддерживается в live().

Итак, какова наилучшая практика для чего-то подобного? Кажется, что есть много плюсов и минусов для этого в любом случае (css против document.ready), и если они скрыты CSS по умолчанию, кнопки будут нормально переключаться с нумерацией страниц ajax. Но если javascript не включен, функциональность кнопок будет потеряна. У кого-нибудь есть совет для этого?

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


jquery css fade
person Josh Kovach    schedule 09.04.2011    source источник

Ответы (2)


arrow_upward
6
arrow_downward

Если вы пытаетесь изменить стиль элементов, загружаемых через Ajax, это почти как попытка поразить движущуюся цель. Я бы создал два объявления в своей таблице стилей — одно для скрытого, одно для видимого — а затем переключал их на основе класса, прикрепленного к тегу body (или любому другому содержащему тегу).

Вот так:

body .mybutton {
  display:block;
}

body.loaded .mybutton {
  display:none;
}

Затем в вашем JS-файле:

$(document).ready(function() {
  $('body').addClass('loaded');
});

Таким образом, ко всем элементам с именем класса mybutton — текущему и будущему — будет применен соответствующий стиль.

person Gary Chambers    schedule 09.04.2011
comment
Ага. Добавление класса body во встроенный <script> сразу внутри <body> позволяет избежать вспышки видимости, которая обычно влияет на страницы, использующие подход «сначала отображаемый, а затем скрываемый сценарием». - person bobince; 09.04.2011
comment
Ничего себе, я не понял этого сначала, и мне потребовалось некоторое время, чтобы понять, как работает этот трюк. Я мог бы подумать об изменении «загружено» на «js-enabled», чтобы быть более описательным в том, что на самом деле делает этот класс. Это действительно помогло, и никакой чрезмерной магии не понадобилось. Спасибо. - person Josh Kovach; 10.04.2011

arrow_upward
2
arrow_downward

Сначала вы скрываете с помощью CSS, используя display:none;, а затем используете jQuery toggle(), чтобы показать и снова скрыть. Это лучший способ сделать это. Что касается людей, у которых не включен JavaScript, я бы не беспокоился об этом. Они составляют 1% пользователей. У всех включен JavaScript.

Проверьте рабочий пример http://jsfiddle.net/znJxh/.

person Hussein    schedule 09.04.2011
comment
Стоит отметить, что .toggle() не скрывает внутренние элементы, если родительский контейнер уже скрыт. Наоборот. Вот изменение вашей скрипки, демонстрирующее проблему: jsfiddle.net/znJxh/123 - person YellowShark; 27.02.2014