AjaxでquerySelectorAllメソッドを使いデータ一覧でレコードをクリックでイベント発火させた。他のページではクリック発火したくない。

Question

###AjaxでquerySelectorAllメソッドを使いデータ一覧でレコードをクリックすると打ち消し線が表示されるようにしたが、他のページではクリック発火させたくない。

現在、一覧ページでレコードが一覧になって表示されています。その画面上で、レコードをクリックすると、打ち消し線が表示されるように実装しました。
●●querySelectorAllメソッドを使い、クラスを指定しデータ全てを選択し、その後forEachで一つずつを取り出し、それぞれにクリックで発火するように設定しています。●●
■■index.html.erbでのみ、このイベントを発火させたいです。しかし、他のページでも打ち消し線の表示は生かしたいです。■■

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

lass CreateFoods < ActiveRecord::Migration[6.0]
  def change
    create_table :foods do |t|
      t.string :food_name,               null: false
      t.string :product_name
      t.integer :category_id,            null: false
      t.date :purchase_date,             null: false
      t.date :sell_by
      t.string :shop
      t.references :refrige,       foreign_key: true
      t.boolean :checked
      t.timestamps
    end
  end
end

t.boolean :checkedで、checkedがtrue,falseで表示が変わるようにしています。

function check() {
  const foods = document.querySelectorAll(".food");
         // querySelectorAllメソッドで、foodをクラス名にもつ要素を取得できる
         // views/foods/index.html.erbのfood部分のブロックをクリックした時にイベントを発火させたい
    foods.forEach(function (food) {
      food.addEventListener("click", () => { // 要素1つずつに対して、「クリック」した際に動作する処理を記述
         // ↓ここにクリックした時に行う「何らかの処理」を記述していく

        const foodId = food.getAttribute("data-id");
        const XHR = new XMLHttpRequest();
        XHR.open("GET", `/foods/${foodId}`, true); // open どんなリクエストをするのかを指定するメソッド// HTTPメソッドの指定,パスの指定,非同期通信のON/OFF
        XHR.responseType = "json";
        XHR.send();
        // ↑ここまでクリックした時に行う「何らかの処理」を記述していく


        // ↓ここからレスポンシブがあがあった場合の処理
        XHR.onload = () => {
        // レスポンスがエラーだった場合の処理
          if (XHR.status != 200) {
            alert(`Error ${XHR.status}: ${XHR.statusText}`);
            return null; // return null;によってJavaScriptの処理から抜け出すことができます。
            }
          // onloadはレスポンスなどの受信が成功した場合の処理
          const item = XHR.response.food;// checkedアクションで返却したitemは、XHR.response.foodで取得できる
          if (item.checked === true) {
            food.setAttribute("data-check", "true"); // data-checkの属性値にtrueをセット
          } else if (item.checked === false) {
           food.removeAttribute("data-check");// data-checkは属性ごと削除
          }
      };
            // ↑ここまでレスポンシブがあがあった場合の処理
    });
  });
}
window.addEventListener("load", check);

  <div class="page_right">
    <div class="in_index">
      <div class="index-food">
          <div class="refrige_right">
           <%= link_to @refrige.refrige_name, edit_refrige_path(@refrige.id) %>
          </div>
      </div>
      <div class="sabu_index_food">
         <div class="index_scroll">
             <table class="food_table">
                  <th>食材名</th>
                  <th>商品名</th>
                  <th>カテゴリー</th>
                  <th>購入日</th>
                  <th>賞味期限</th>
                  <th>購入店</th>
                 </tr>
                <% @foods.each do |food| %>
                 <tr class="food" data-id=<%= food.id %> data-check=<%= food.checked %>>
                    <td class="food_name" id="lists" > <%= food.food_name %></td>
                    <td class="product_name" id="lists"><%= food.product_name %></td>
                    <td class="category" id="lists"><%= food.category.name %></td>
                    <td class="purchase_date" id="lists"><%= food.purchase_date %></td>
                    <td class="sell_by" id="lists"><%= food.sell_by %></td>
                    <td class="shop" id="lists"><%= food.shop %></td>
                 </tr>
                <% end %>
              </table>
              </div>
      </div>
    </div>
  </div>
</div>

検索ページでは打ち消し線の表示はあるが、クリック発火は無しにしたいです。

試したこと

<% @foods.each do |food| %>
<tr class="food" data-id=<%= food.id %> data-check=<%= food.checked %>>
検索ページではクラス名をfoodsに変えてみました。そうしたら、思った表示になりましたが、Herokuにアップしたらエラーとなってしまいました????

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

初心者です。わかりにくい点などございましたら追記させていただきます。
解決策ございましたら、回答お願いいたします????‍♀️

Comments

[no1knows]

この問題はもうかいけつしていますか？

[kao.]

連絡いただきありがとうございます。すいません、回答がつかなかったので、他の方法を考え実装中です。解決はしていませんが、今回はこちらの実装はやめました????‍♀️
今後の勉強に、解決策がございましたら提案いただけると嬉しいです。

Answer 1

クラス名を変えた事で解決するかもしれません。

個人的には同じ内容であれば、indexページだけクラス名を変えるといったことはせず、使い回すのが良いかと思います。

僕なら、bodyやdivなどのIDやClassに、controller.controller_nameやcontroller.action_nameを設定し、その値を見てJSを実行する・しないといった方針で実装するかと思います。

---

説明不足ですいません。。。具体的には

<body id="<%= controller.controller_name %>" class="<%= controller.action_name %>">

と設定しておき、下記で条件分岐を行う形です。

if( document.body.id == 'foods' && document.body.classList.contains('index')){
:　// foodコントローラーのindexアクションのみで実行されるJavaScript
}

Comments

[kao.]

ご回答ありがとうございます！controller.controller_name、controller.action_nameでコントローラー名やアクション名で条件分岐ができるのですね。知りませんでした。ビューのヘルパーメソッドとのことですが、今回の場合だとどのように使いますか？
教えていただけると嬉しいです????‍♀️

[no1knows]

> index.html.erbでのみ、このイベントを発火させたいです。
とのことなので、下記のようにして利用します。
> bodyやdivなどのIDやClassに、controller.controller_nameやcontroller.action_nameを設定し、その値を見てJSを実行する・しないといった方針で実装する

[kao.]

ありがとうございます。知識がなさすぎてわかりません????
no1knowsさんの情報を元に、自分でもしっかり調べてみます。ありがとうございました！！！！