質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.61%

「要素クリックで画面遷移」のよりよい書き方

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,395

score 17

初歩的な質問で恐縮なのですが、理由が明確に言語化できず、もやもやしています。

trをクリックした際に、(hoge/:id)に遷移する、という要件があるとします。

<!-- #1 -->
<tr onclick="window.location='hoge/1'">...</tr>
<!-- #2 -->
<tr data-href="hoge/1">...</tr>
...
<script>
  $('tr[data-href]').on('click', function(){
    window.location = $(this).attr('data-href');
  });
</script>

上記のどちらでも実現はできますが、#2のほうが、感覚的によいのでは?と感じています。
ただ、あくまでも感覚で、それが何故なのかを言語化できずにもやもやしています。
#1、#2のどちらかのほうがよい理由、あるいはどちらでも構わない理由に関して、
知見を伺えますと幸いです。


編集リクエストを頂いたので、(:id)に関して追記を致します。

<table>
  <% fugas.each do |fuga| %>
    <%= content_tag('tr', data: {href: hoge_path(fuga.id)}) do %>
      ...
    <% end %>
  <% end %>
</table>


Ruby(Rails)にはなるのですが、idは動的に決まるというイメージです。

どうぞよろしくお願いいたします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2019/02/06 09:09

    その:idはどのように決まるのでしょうか。上から連番でしょうか。
    もう少し構造がわかるHTMLをご提示ください。

    キャンセル

  • m.ts10806

    2019/02/06 09:10

    ※正直どちらでも要件満たせていて問題ないので回答しづらいのは確かです

    キャンセル

  • m.ts10806

    2019/02/06 09:48

    Ruby On Railsをタグに追加しておいてください。

    キャンセル

回答 3

checkベストアンサー

+1

相違点がいくつかあるので、そこは分けて考えるべきかな、とは思いますが、個人的にはonclick属性の使用には消極的です。

Only one onclick handler can be assigned to an object at a time. You may prefer to use the EventTarget.addEventListener() method instead, since it's more flexible.
GlobalEventHandlers.onclick - Web APIs | MDN

勝手訳「onclickハンドラは一つのオブジェクトにひとつだけ割り当てができます。代わりにEventTarget.addEventListener() メソッドを利用した方が、より柔軟性があります。」

原因は、<input onclick="list()"> がinput要素 の list属性 を参照してしまうためです。
JavaScript - input要素のonclickなどのイベントハンドラからグローバルな関数 list にアクセスできない件|teratail

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/02/06 10:08

    回答ありがとうございます!
    JavaScriptのイベントハンドラと<script>タグでの記述って何が違うのか、というのが気になっていたので、
    まさしくひとつ教えて頂いた気持ちです。

    追加質問で恐縮なのですが、
    > 相違点がいくつかあるので
    いくつか、のうちのひとつが教えて頂いたリンクの内容だと思うのですが、
    想定されている相違点を(参照リンクとかで構いませんので、もしあれば…!!!)教えて頂けると大変幸いです!

    キャンセル

  • 2019/02/06 10:26

    ・jQuery使用の有無。
    ・URLをスクリプト内に書くか、HTMLに書くか。
    が異なると思います。

    キャンセル

  • 2019/02/06 10:32

    なるほど、ありがとうございます!

    キャンセル

+1

今のところどっちでも問題はなく、理由としては「結果が同じだから」くらいでしかないですが、
もし効率的に書きたいなら「hoge/」は固定のようなので#2ではわざわざ渡さなくて良いかと。:id部分だけ渡す感じですね。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/02/06 09:53

    編集リクエスト、回答ありがとうございます!
    FWの記載なく失礼しました。確かにhtmlだけみるとそうですね!
    `hoge_path(id)`で渡す関係上、`hoge/`から記載しておりました。

    キャンセル

0

なんかおかしい

  $('tr[data-href]').on('click', function(){
    location.href = $(this).data('href');
  });

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/02/06 09:48

    確かにその通りですね!ご指摘ありがとうございます。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.61%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る