Переменная Ruby в блоке jquery show / hide

Question

Переменная Ruby в блоке jquery show / hide

0

Прямо сейчас этот jquery работает отлично:

:javascript
    $( "#catExpander1" ).click(function() {
      $( "#category1" ).toggle( "fast", function() {
      });
    });

Но, конечно, у него есть большая проблема: его нельзя использовать повторно, чтобы показать/скрыть другие div. Как заменить жестко кодированные идентификаторы на переменные?

Для контекста:
В настоящее время я использую это в приложении rails для отображения/скрытия подкатегорий под их родительской категорией, которые находятся внутри списка навигации по категории боковой панели. Единственный способ, который я могу сейчас сделать, - создать отдельный блок jquery для каждой категории и подкатегории, но, конечно, это ужасный подход, потому что он требует много повторения, не может использоваться повторно и т.д.

Isaac Gregson 27 нояб. 2013, в 16:20

Источник

0

Похоже, что вы можете сделать это, используя классы и функции обхода, но я думаю, что нам нужно посмотреть HTML, чтобы дать лучший ответ.
Jason P 27 нояб. 2013, в 14:43
0

".#category1" - довольно испорченный селектор, я не могу поверить, что он сейчас что-то делает для вас.
meagar♦ 27 нояб. 2013, в 14:46
0

Тебе не нужен рубин здесь. использование атрибутов данных или привязка $ .toggle () к классам, которые вы добавляете к элементам, которые вы хотите переключить, является правильным способом сделать это. Вы можете использовать ruby для присоединения класса или, что еще лучше: создать сервис, который возвращает json скрытых элементов, и применить его, когда dom будет готов
silicakes 27 нояб. 2013, в 15:27

Показать ещё 1 комментарий

Теги:

javascript

jquery

ruby-on-rails

ruby

3 ответа

1

Вы можете добавить общий класс css во все категории, например, в category и использовать делегирование событий:

$( "#catExpander1" ).on('click', '.category', function() {
  $(this).toggle('fast')
});

amenzhinsky 27 нояб. 2013, в 13:53

0

Это прекрасно работает. Награжден правильным ответом @meagar, однако, из-за его подробного объяснения. Ушел вперед и дал ваш голос.
Isaac Gregson 16 дек. 2013, в 17:24

1

Я предлагаю использовать атрибут данных HTML. Например, для каждого расширителя добавьте атрибут data, который ссылается на идентификатор для расширения.

Предполагая, что расширитель - это изображение.

<img src="..." data-target="category1" class="expander" />

Затем в вашем коде

$(".expander").click(function() {
  $("#" + $(this).data("target")).toggle( "fast", function() {
  });
});

Simone Carletti 27 нояб. 2013, в 13:07

Ещё вопросы

Похоже, что вы можете сделать это, используя классы и функции обхода, но я думаю, что нам нужно посмотреть HTML, чтобы дать лучший ответ.
".#category1" - довольно испорченный селектор, я не могу поверить, что он сейчас что-то делает для вас.
Тебе не нужен рубин здесь. использование атрибутов данных или привязка $ .toggle () к классам, которые вы добавляете к элементам, которые вы хотите переключить, является правильным способом сделать это. Вы можете использовать ruby для присоединения класса или, что еще лучше: создать сервис, который возвращает json скрытых элементов, и применить его, когда dom будет готов
Это прекрасно работает. Награжден правильным ответом @meagar, однако, из-за его подробного объяснения. Ушел вперед и дал ваш голос.

meagar · Accepted Answer · 2013-11-27T11-50-00.000Z

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

Если вы действительно хотите перевернуть свое собственное решение...

Как правило, вы связываете связанные узлы DOM вместе через href кнопки (при условии, что это ссылка) или data-. Важно, чтобы сам DOM передавал связь между элементами, как для семантической целостности вашего документа, так и потому, что это лучший способ выполнить это с минимальным количеством JavaScript.

Затем вы можете написать общий обработчик кликов, который знает, какой элемент отображать/скрывать на основе того, какой элемент был нажат.

Наконец, все ваши расширителя кнопок будет дан класс, как expandable, который вы бы затем использовать, чтобы связать все кнопки с одним $('.expandable').click вызов, или через один on вызов, если они динамически добавляется в DOM.

Результат будет выглядеть примерно так:

<a href="#category1" class="expandable">Expand Category 1!</a>
<div id="category1">
Item 1
Item 2
</div>

А также...

$(".expandable").click(function(e) {
  e.preventDefault();
  $($(this).attr('href')).toggle( "fast" );
});