投稿2018/09/12 16:05
編集2018/09/14 15:46jQueryのif文について質問させていただきます。
wordpressを使ってWEBサイトを制作しております。
表示中のページのURLを取得し、ifを使って下記の内容で条件分岐をしようとしています。
1.トップページ以外の場合
2.トップページの場合
2度目のelse if以下の部分が機能しません。中身のスクロールの機能は単体で試すと動くのでelse ifのURL指定に原因があるのでは…と思ったのですが。
jquery
1jQuery(function($) { 2 var url = location.href; 3 if(url !== "http://example.com"){ // 現在のページがTOPページ以外なら 4 // URLにhttp://example.comを追加 5 $(".menu_ex a").each(function() { 6 var obj = jQuery(this); 7 var link = obj.attr("href"); 8 obj.attr("href","http://example.com"+link); 9 }); 10 // 708px以下の場合は単純に開始位置からスクロール 11 if (window.innerWidth <= 708){ 12 var id = url.split("#"); 13 var $target = $('#' + id[id.length - 1]); 14 var pos = $target.offset().top; 15 $("html, body").animate({scrollTop:pos}, 800); 16 } 17 // 709px以上の場合はヘッダー分をマイナスした位置に開始位置からスクロール 18 else if(window.innerWidth >= 709 ){ 19 var headerHight = $(".fix").outerHeight(); 20 var id = url.split("#"); 21 var $target = $('#' + id[id.length - 1]); 22 var pos = $target.offset().top - headerHight; 23 $("html, body").animate({scrollTop:pos}, 800); 24 } 25 26 // ※ここから機能しません 27 // TOPページの場合はクリックした位置からスクロール 28 }else if(url == "http://example.com"){ // 現在のページがTOPページなら 29 $('a[href^="#"]').click(function(){ 30 var href= $(this).attr("href"); 31 var target = $(href == "#" || href == "" ? 'html' : href); 32 var pos = target.offset().top; 33 $("html, body").animate({scrollTop:pos}, 600, "swing"); 34 return false; 35 }); 36 } 37});
HTML
1<div class="fix"> 2 <header id="aaa" class="aaa"> 3 <h1><a href="http://example.com"><img class="img" src="http://example.com/aaa.svg" alt=""/></a></h1> 4 <div id="globalNavi"> 5 <div id="navToggle"> 6 <div> 7 <span></span> <span></span> <span></span><span class="menu">MENU</span> 8 </div> 9 </div> 10 <nav> 11 <ul id="menu-navi" class="navi"> 12 <li id="menu-item-10" class="menu_fix"><a title="000" href="http://example.com/">000<span>000</span></a></li> 13 <li id="menu-item-11" class="menu_ex"><a title="aaa" href="#aaa">AAA<span>aaa</span></a></li> 14 <li id="menu-item-12" class="menu_ex"><a title="bbb" href="#bbb">BBB<span>bbb</span></a></li> 15 <li id="menu-item-13" class="menu_ex"><a title="ccc" href="#ccc">CCC<span>ccc</span></a></li> 16 <li id="menu-item-14" class="menu_ex"><a title="ddd" href="#ddd">DDD<span>ddd</span></a></li> 17 <li id="menu-item-15" class="menu_fix"><a title="000" href="http://example.com/eee/">000<span>000</span></a></li> 18 <li id="menu-item-16" class="menu_ex"><a title="eee" href="#eee">FFF<span>eee</span></a></li> 19 </ul> 20 </nav> 21 </div> 22 </header> 23</div>
動作確認はchrome（68/mac）とsafari（11.1.2/mac）で行なっております。
勉強中で初歩的なところで間違えているような気がするのですが、試行錯誤を繰り返しても一向にうまくいかないため相談させていただきました。
恐れ入りますが、アドバイスいただけましたら幸いです。よろしくお願いいたします。
※自己解決欄に入力すると「自己解決」扱いになりそうなので、こちらに解決の際のコードを追記いたします。
PHP
1// functions.phpに以下のコードを記載 2if ( !is_admin() ) { 3 function register_script() { 4 wp_register_script('scroll_1', get_template_directory_uri(). '/js/scroll_1.js'); 5 wp_register_script('scroll_2', get_template_directory_uri(). '/js/scroll_2.js'); 6 } 7 function add_script() { 8 // TOPページのみ 9 if (is_front_page()) { 10 wp_enqueue_script('scroll_1'); 11 // TOPページ以外 12 } elseif (!is_front_page()) { 13 wp_enqueue_script('scroll_2'); 14 } 15 } 16 add_action( 'wp_print_scripts', 'add_script' ); 17}
回答3件
0
ベストアンサー
要件を満たせるか別として、トップページ等の判定ならWordPressの機能にあるのでそちらを使われた方がいいように思います。
投稿2018/09/13 00:12
総合スコア80850
0
提示の条件文であれば、else if ではなく else で十分です。
条件分岐については console.log() を使って、どういう値がきているかを確認してみてください。
【Chrome DevToolsを使いこなそう！ Web開発に必須なブラウザ開発ツールによるデバッグの基本 - エンジニアHub｜若手Webエンジニアのキャリアを考える！】
https://employment.en-japan.com/engineerhub/entry/2017/05/30/110000
【簡単なブラウザの開発者ツールの説明（Chrome）】
https://qiita.com/takihiyoshi/items/95c9bde8b7b8bda86ce1
投稿2018/09/12 17:28
総合スコア69398
0
こちらの最後にスラッシュ(/)を追加したら変わりませんか？
最初のifで「http://aaa.com/」条件にすれば、else ifでなくelseで済むとも思います。
(URL=○○以外、に当てはまらない場合はURL=○○だと思うので)
jQuery
1jQuery(function($) { 2 var url = location.href; 3 if(url !== "http://aaa.com/"){ // 現在のページがTOPページ以外なら 4 $(function() { 5 イベント1 6 }); 7 if { 8 イベント2 9 } 10 else if{ 11 イベント3 12 } 13 }else{ // 現在のページがTOPページなら 14 $(function(){ 15 イベント4 16 }); 17 } 18});
投稿2018/09/12 16:22
編集2018/09/12 16:23
総合スコア2534
あなたの回答
tips
プレビュー
Q&A
