Передать динамически сгенерированные идентификаторы div из Rails в javascript / coffeescript - PullRequest
Новая
       2

Передать динамически сгенерированные идентификаторы div из Rails в javascript / coffeescript

3 голосов
/ 28 февраля 2012

У меня есть список предметов, для которых я хотел бы раскрыть более подробное описание каждого предмета под названием предмета по нажатию кнопки или ссылки. Например, очень простая реализация будет использовать .toggle (). В Rails у меня есть это для описания: 

<% @products.each do |product| %>
    <%= div_for(product, :class => "descriptions") do %>
        <%= product.description %>
    <% end %>
    <input type="button" id="button_<%= product.id %>" value="Show/hide" />
<% end %>

Я должен был бы поймать динамически генерируемые идентификаторы div на стороне javascript / coffeescript: 

jQuery ->
$('#button_?????').click ->
    $('#product_ ????').toggle()

Однако я не могу заставить это работать.

С другой стороны, я мог бы достичь того же результата, используя что-то вроде '.closets ()', например: 

jQuery ->
$('#button').click ->
    $('#button').closest('.descriptions').toggle()

Однако я не могу заставить это работать. Это кажется довольно простой задачей, но я слишком неопытен в javascript, чтобы заставить это работать. Как поймать эти динамически сгенерированные div на стороне JavaScript? Любая помощь будет очень ценится.

Ответы [ 2 ]

0 голосов
/ 28 февраля 2012

Чтобы захватить динамически генерируемые div из Rails, вы обычно делаете следующее: 

var divs = document.querySelectorAll('.descriptions');

Имейте в виду, что querySelectorAll НЕ является активным, поэтому любые изменения в DOM не будут отражены в NodeList.

У jQuery есть отличное решение, как и предложил @MrDanA. Однако обработчик click должен находиться на кнопке, а не в описании. Кроме того, live устарела. Его необходимо заменить на on. 

$('.descriptions').each(function(){
  var $this = $(this);
  var button = $this.next(); // assuming that the button is the next sibling
  button.on('click', function(e) {
    $this.toggle();
    e.preventDefault(); // to prevent page from jumping to the top of the page
  });
});

Это должно дать вам хорошую основу. Дайте мне знать, как именно вы хотите, чтобы он вел себя.

0 голосов
/ 28 февраля 2012

Если только DIV, которые вас интересуют, в этом случае будут иметь класс «описаний», вы можете использовать живую функцию jQuery .Это выглядело бы так: 

$('.descriptions').live("click", function() { ... });

Таким образом, всякий раз, когда формируется новый элемент с классом описаний, он получает этот код jQuery для своего события click.

...