Rails 部分テンプレート内でjqueryを動かすも2つめ以降のテンプレートで効かない

Question

前提・実現したいこと

Railsで開発中。
部分テンプレートで繰り返し表示しているviewにあるチェックボックスをクリックすると、ClassをAdd/Removeするという処理をjqueryで書いています。

しかし、2つめ以降に繰り返されている部分テンプレートで、このjqueryが効きません。

処理は、チェックボックスクリックすると、delete-textというクラスを付与し該当するitemに赤取り消し線を引くという処理です。

発生している問題・エラーメッセージ

以下部分テンプレートです。

_item.html.erb

<li class="idea">
     <div  id='checked-item'>
        <%= item.text  %>
     </div>
       <div class="checkbox checkbox-right">
          <%= link_to item_path(item), method: :delete , data:{ confirm: '本当によろしいですか？'}, remote: true do %>
               <i class="fa fa-trash fa-fw" aria-hidden="true"></i>
          <% end %>
          <!-- ここをモーダルにする -->
          <%= link_to edit_item_path(item), method: :get , item_id: item.id do %>
                <i class="fa fa-edit fa-fw" aria-hidden="true" ></i>
          <% end %>
          <input type="checkbox" id="check" />
      </div>
  </li>


<!-- チェックつけたら赤取り消し線つける -->
<script>

$(function() {
  $('#check').on('click', function() {
    if ( $(this).prop('checked') == false ) {
      $('#checked-item').removeClass("delete-text");
    } else {
      $('#checked-item').addClass("delete-text");
    }
  });
});
</script>

該当のソースコード

以下該当するViewです。

edit.html.erb

 <% if @items.present? %>
   <div id="item-content">
      <% @items.each do |item| %>
      <%= render partial: "item", locals: { item: item } %>
    <% end %>
  </div>
<% end %>

試したこと

jqueryの処理、<script>を部分テンプレート側に書いても、呼び出し側に書いても同じでした。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

idを使っているせいではないでしょうか？
idは固有でなければならないので、部分テンプレート内で同じidが複数生成されていて、jsさんが困ってるのでは？

Comments

[Romay]

コメントありがとうございます。
たしかにidを使用しています。
ただ、jqueryを動かすにはclassではなくidを使わなければいけないと認識しているのですが、この場合どう対処したらよろしいでしょうか？

[sansansandodo]

その認識は違いますね。
idだと、オブジェクトを直でとってきてくれるので操作が楽というだけです。
あくまでidで実装したいなら、index番目なidを生成してあげるといいでしょう。

ただ、classで実装するのが現実的でしょうね。
$(".check")これでchackクラスのDOM全部にアクセスできます…配列っぽい感じで帰ってくるので、個別に処理したければ$(".check")[0]みたいな感じでいいはず

.onは配列っぽいJqueryオブジェクトに直接使えるので…

```js
$(".check").on("click",function(){
console.log(this)
})

```
とかでそれぞれのcheck要素をクリックしたときのイベントをバインド出来るはず。。。

[Romay]

ご丁寧にありがとうございます！
jqueryの勉強不足でして自分の認識違いでした...。
class指定で試してみます！

[sansansandodo]

クラスに変えてもうまくいかなかったら手元で試してみるのでまたコメントください

[Romay]

度々失礼します。クラスに変えたところ2つめ以降にも効きました！
ですが、"個別に処理したければ$(".check")[0]みたいな感じでいいはず"
のところについて少し詳しく教えていただけると嬉しいです。
現状、どのチェックボックスをクリックしてもすべての部分テンプレートに反映されてしまいます。
チェックボックスをクリックした部分テンプレートのみにjsを効かしたいのですが、各テンプレートの配列番号？はどのように取得したらよろしいでしょうか。

[sansansandodo]

なるほど。

場合によって対処がことなります。
今回のように、eachで回して部分テンプレートを呼び出す場合は、each_with_index do |item, i|とかで回して、localで渡すものを、itemだけではなくiも渡しておけばいいわけです。

次に、eachで回さずに部分テンプレートを呼ぶ手が考えられます。
render partial: 'item', collection: @item
これで、@itemにあるデータの回数分呼べます。そして、勝手にカウントしてくれています。
何番目かを知りたければ#{変数名}_countでわかります。

最後に、クリックする要素と、チェックがつく要素がjs内で追跡できる場合。
thisを使いましょう。
「.checkなDOMをクリックしたとき、子要素の.checkboxなチェックボックスをチェックする」
みたいな処理はthisが有効です。
$(".check").on("click",function(){
console.log( $(this).find(".checkbox") )
})

こんな感じ。

[sansansandodo]

#{変数名}_countという表現は違うかも…
今回だと
<%= render partial: 'item', collection: @items %>
でよんだら、item_counterでいいです。
```html
<script>
(function(){console.log(<%= item_counter %>)})()
</script>
```

[Romay]

{変数名}_count 初めて知りました！ありがとうございます！
各テンプレートに0からの連番を渡すことができました！
<input type="checkbox" class="check#{item_counter} />" として各テンプレートごとに違う数字のclassを作れば、それぞれ動くはず！と思ったのですがうまくいきません。。。
この考えは浅はかでしょうか。
何度も質問してしまい大変申し訳ありませんがご教授いただけますと幸いです。

[sansansandodo]

ふむ。結構いろいろ問題が考えられるのでソースが欲しいですが…

ぱっとみおかしなのは class="check#{item_counter}ですかね…
文字列展開は#{変数}で問題ありません…が、これはruby変数です。
class=""内にはHTMLの記法で書く必要があるので…<%= "#{ruby変数}" %>
としてあげましょう

<input type="checkbox" class="check_<%= "#{item_counter}" =%> " />

であれば、連番命名自体は可能なはずです。

[sansansandodo]

あ、これは.html.erbで書いている前提です（haml記法はわからないので検索お願いします）

[Romay]

<input type="checkbox" class="check_<%= "#{item_counter}" =%> " />
こちらで見事にできました！本当にありがとうございます！classにerb記法でさらに文字列展開というのが新鮮でした。
ただ、部分テンプレートでAjax通信を実装していた部分が、collectionにしただけで反応しなくなるという副作用がありました。別の質問として投稿しておりますので、もしお時間ありましたら目を通していただけると大変嬉しいです。こちらの質問はベストアンサーとして完了させていただきます！