Ruby / Rails + jQuery - присваивание имени переменному селектору jQuery в рельсах - PullRequest
Новая
       5

Ruby / Rails + jQuery - присваивание имени переменному селектору jQuery в рельсах

0 голосов
/ 01 сентября 2011

Я использую Ruby / Rails для динамического создания div и кнопки через цикл, и я хотел бы знать, как вы называете элемент, чтобы jquery знал, какой селектор применить эффект.

У меня есть несколько простых ruby ​​/ html, которые создают несколько панелей с фотографиями и кнопку, которая запускает некоторый ajax в фоновом режиме, а затем меняет цвет панели с помощью эффекта анимации jQuery (я убрал удаленные вызовы в ссылка для краткости) 

 <% for photo in @photos %> 
   <div id="panel" style="background-color: #FFF;">
        .....Text......
        <%= link_to "Select", select_photo_path(photo), :class => "button" %>
   </div>
   <br />
 <% end %>

и jQuery выглядит как 

<script>
  $(document).ready(function(){
        $(".button").click(function () {
             $("#panel").animate({ backgroundColor: "#006600" }, 500);
     });        
  });
</script>

Таким образом, проблема заключается в том, что каждый раз, когда я нажимаю на кнопки, все панели меняют цвет, а не конкретную панель, на которую ссылаются в цикле for. Я предполагаю, что это потому, что все панели имеют одинаковый идентификатор.

Так как мне установить (class / id) кнопок и панелей так, чтобы эффекты событий button1 .click панели1 и кнопки2 работали только на панели2, и т. Д., И т. Д.

Я довольно новичок в javascript прямо сейчас.

Ответы [ 2 ]

1 голос
/ 01 сентября 2011

Не справочная панель, а справочная this.parent(). this в этом случае должна быть сама кнопка, где parent() вернет родительский объект. Вы должны тогда оживить это: 

this.parent().animate({ backgroundColor: "#006600" }, 500);
0 голосов
/ 02 сентября 2011

Вы можете использовать [link_to_function] (http://api.rubyonrails.org/classes/ActionView/Helpers/JavaScriptHelper.html#M001756) и определить пользовательскую функцию в Jquery и вызывать ее с помощью 

         this.animate().
...