Question

我正在使用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循环中引用的特定面板。我假设这是因为所有面板都具有相同的ID。

那么如何设置按钮和面板的（class / id），以便button1 .click事件效果panel1和button2仅适用于panel2等等????

我现在对javascript很新。

Answer 1

不要引用面板，而是引用this.parent()。在这种情况下，this应该是按钮本身，parent()将返回父对象。然后你应该动画：

this.parent().animate({ backgroundColor: "#006600" }, 500);

Answer 2

您可以使用[link_to_function]（http://api.rubyonrails.org/classes/ActionView/Helpers/JavaScriptHelper.html#M001756）并在Jquery中定义自定义函数并使用

调用它

         this.animate().

Ruby / Rails + jQuery - 在rails中命名变量jQuery选择器

2 个答案: