JavaScript挑战--Rails按钮迭代

Question

在我的welcome#index页面上，有一个按钮可以使用AJAX远程(或者应该说是异步地)为Article编写一个新的Comment。

除了使用rails迭代文章时，浏览器在所有迭代元素(文章)中都将JS按钮视为相同的按钮外，它的工作原理是完美的。

我猜想JS迭代是必需的。

如何解决这个问题？

# welcome/index.html.haml

- @articles.each do |article|
        = link_to "Comment", new_article_comment_path(article), class: "write-button", remote: true
        = link_to "Close", root_path, class: "close-button", remote: true
        = link_to "Commented", root_path, class: "written-button", remote: true
        #comment-form{ :style => "display:none;" }

#comments/new.js.erb

$( '#comment-form' ).html('<%= j render ("form") %>');
$( '#comment-form' ).slideDown( "slow ");
$( '.write-button' ).hide();
$( '.close-button' ).show();

#comments/create.js.erb

$( '#comment-form' ).slideUp(350);
$( '.close-button' ).hide();
$( '.written-button' ).show();

#welcome.js

//slide up and return
$( '.close-button' ).hide();
$( '.close-button' ).on('click', function() {
    $( '#comment-form' ).slideUp(350);
    $( '.close-button' ).hide();
    $( '.write-button' ).show();
});

Answer 1

如果我正确理解，您需要为comment-form div提供一个comment-form，该div等于article.id，这样form就会出现在这个受尊敬的article上。

%div{:id => "comment-form-#{article.id}", :style => "display:none;"}

并将comments/new.js.erb更改为下面

#comments/new.js.erb

$( "#comment-form-<%= params[:article_id] %>").html('<%= j render ("form") %>');
$( "#comment-form-<%= params[:article_id] %>" ).slideDown( "slow ");
$( '.write-button' ).hide();
$( '.close-button' ).show();