Q&A
2回目以降の読み込みに問題がありました。
問題点を探るためのヒントをいただき本当にありがとうございます。
質問内容
RailsとjQueryを学習中の者です。
jQueryを用いてページのパスごとにデザインを変更する処理を記述しようとしております。
初回ページ読み込み時のパスによって、liタグにクラス名を付与する処理はできたのですが、
もう一度リンクを踏んでしまうとクラス名が付与されていない状態になってしまいます。
お知恵をお貸しいただけると幸いです。
①ページが読み込まれる。
②現在のパスを変数に格納
③aタグのパスを変数に順次格納
④条件分岐により現在のページと同一のパスであればデザイン変更（色変え等）
該当のソースコード
javascript
1$(function() { 2 var current_path = $(location).attr('pathname'); 3 $('.sidebar ul li a').each(function() { 4 var a_path = $(this).attr('href'); 5 if (current_path === a_path) { 6 // 読み込むaタグは毎回違うのでその時々の親を指定 7 $(this).parent('li').addClass('current-page'); 8 } 9 }); 10});
HTML
1<div class="sidebar"> 2 <ul> 3 <li><%= link_to 'アカウント', account_users_path %></li> 4 <li><%= link_to 'プロフィール', profile_users_path %></li> 5 </ul> 6</div>
試したこと
パスの読み取り方法やメソッド名を別のものに変更しても動きませんでした。
回答2件
0
ベストアンサー
引用テキストページのパスごとにデザインを変更する処理
jQueryを利用せず下記のようにHTMLにコントローラー名やアクション名を利用してCSSを記述したり
Ruby
1# application.html.erb 2<body id="<%= controller_name %>" class="<%= action_name %>">
HTMLでコントローラー名やアクション名で条件分岐して、異なるHTMLを実装するほうが好ましい気がします。
もう一度リンクを踏んでしまうとクラス名が付与されていない状態
Turbolinksを考慮していないので、初回だけしか処理が実行されない状態かと思います。
JavaScript
1document.addEventListener("turbolinks:load", function(){ 2 ...ここにJavaScriptを記載する 3})
投稿2022/07/17 22:43
総合スコア3365
0
もう一度リンクを踏むとクラス名が付与されていない状態になるのはおそらくリンクを踏んでページ遷移しているからかと思いますが、
その後Javascriptによるクラス名の再付与が上手くいかないということでしょうか？
だとすれば初回ページ読み込み時のパスと(link_to等の)リンクのパス(遷移後のURLのパス)が微妙に異なってる可能性が高そうですね。
投稿2022/07/17 22:14
総合スコア2701
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/07/18 03:04
2022/07/18 04:01