ajaxで複数のボタンをclassで扱う際の処理について

Question

###前提・実現したいこと
Ruby on Railsでフォロー機能を追加しようと考えています。
現在、Railsでのバックエンドの処理は完了しているのですが、ajaxでのボタンの切り替えを行いたいと考えています。

###発生している問題・エラーメッセージ
Railsではremote: tureでajaxの切り替えができ、その際create.js.erbなどのjsテンプレートが呼ばれて、セレクターで指定した箇所が変わると認識しているのですが、フォロー機能のようなボタンの場合はidでフォローボタンを指定することができず、悩んでいます。（例えば以下のようなユーザー一覧におけるフォローボタンなどはidを付与して、その部分のhtmlを書き換えると行った処理ができない。）

###試したこと
通常よくある#follow_formなどと変更したい箇所をidで指定せずに.follow_formなどとして、それをjQueryのevent.targetで取得しようと試みましたが、どうもうまくいきません。

$(".follow_form").click(function (event) {
    $(event.target.className).html("<%= escape_javascript(render('/users/shared/follow')) %>");
});

それぞれのボタンを押したときにそのボタンだけが切り替わるようにうまく処理したいです。
###補足情報(言語/FW/ツール等のバージョンなど)
RoR 4.2.6, Ruby 2.3.4

Answer 1

「event.target.className」で得られる値は生のクラス名で一つしかないことが保証されていません
classNameの再利用が必要な場合、すべてのクラスを対象にするために先頭にピリオドをつけたり
スペース文字をカンマに変えないといけないでしょう

$(function(){
  $('#btn').on('click',function(e){
    var c=$(this).attr("class");
    c=c.replace(/^(?=.)/,".").replace(/ +/g,",.");
    $(c).html("test");
  });
});

<input type="button" id="btn" value="btn" class="aaa xxx">
aaa bbb:<div class="aaa bbb"></div>
aaa ccc:<div class="aaa ccc"></div>
bbb ccc:<div class="bbb ccc"></div>

またajax処理の記載がいまひとつどうしたいのかわかりませんが
ajaxでしたら都度必要データを読みにいく処理が入ると思います
もし事前にすべてのデータを読むならajaxである必要はありません

Answer 2

each_with_index を使ってidを付与して個別のセレクタにすれば良いのでは無いでしょうか。

Comments

[daikitakaya]

その場合、create.js.erb側では``this``で書き換えたい場所を指定する形でしょうか？

Answer 3

thisでいけないですかね？未検証です。すみません。

$(".follow_form").click(function () {
    $(this).html("<%= escape_javascript(render('/users/shared/follow')) %>");
});

Comments

[daikitakaya]

回答ありがとうございます！

確かに$(this)で取るのが順当ですよね。
試して見たのですが、なぜかダブルクリックでないと切り替わらないのと一度切り替えたあとは動作しない感じです.....

``Form submission canceled because the form is not connected``というwarningが出てちゃいます。。

[IShix]

ご返答遅れてすみません。teratailチェックできてませんでした。
Railsのお作法的なものがうまくクリアできていない感じですかね？
念の為、jqueryのみのシンプルな環境で試してみたところ正常に動作しました。
https://codepen.io/Ishikawa420/pen/qXPaGQ

あとこういうのも見つけました。
【Chrome】隠しFormの送信が出来なくなった
http://qiita.com/yosida001/items/c0d4776a7889c1db67db