前提・実現したいこと
railsのアプリケーションでスマートニュースやグノシーのような、スワイプタブ切替機能を実装したいと思っています。
参考記事に合わせて、jQueryのプラグインbxSliderを読み込んで、common.jsでイベントを指定しています
しかし、思ったような挙動が起こらず、調べてみるとjqueryが当たっていないようです
また、common.jsにconsole.log()を入れても表示されませんでした。代わりにjquery周りのエラーがたくさん出ます
jQueryはこの方法で用いています。
html.erb上でインラインでjqueryを使ったスクリプトは作動します。
発生している問題・エラーメッセージ
dropdown-menu.self-5794b6ca26364ce522cb47a8ef050870fda0b886cfeef69ec27ef116900f1984.js?body=1:121 Uncaught TypeError: $(...).aaDropdownMenu is not a function at HTMLDocument.onDOMReady (dropdown-menu.self-5794b6ca26364ce522cb47a8ef050870fda0b886cfeef69ec27ef116900f1984.js?body=1:121) at HTMLDocument.dispatch (jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:5184) at HTMLDocument.elemData.handle (jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:4992) at Object.e.dispatch (turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1:6) at r.notifyApplicationAfterPageLoad (turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1:7) at r.pageLoaded (turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1:7) at turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1:6 on_content_end.js:54 on_content_end ==>response to loadPagePattern, href=http://localhost:3000/coupons, pattern.id=undefined jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3828 Uncaught TypeError: $(...).aaDropdownMenu is not a function at HTMLDocument.onDOMReady (dropdown-menu.self-5794b6ca26364ce522cb47a8ef050870fda0b886cfeef69ec27ef116900f1984.js?body=1:121) at mightThrow (jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3535) at process (jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3603) jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3828 Uncaught TypeError: elems.sortable is not a function at init_sortable (has_many.self-ece319debdc01ca5096ae8ac6c130ffc0decab382543b4b94e18591375d3d3bb.js?body=1:42) at HTMLDocument.<anonymous> (has_many.self-ece319debdc01ca5096ae8ac6c130ffc0decab382543b4b94e18591375d3d3bb.js?body=1:35) at mightThrow (jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3535) at process (jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3603) jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3828 Uncaught TypeError: $(...).perPage is not a function at HTMLDocument.onDOMReady (per_page.self-ac2a7829e00b21d672b908a9a64b42aef7632ff1dac9a90dda0e779706c71256.js?body=1:63) at mightThrow (jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3535) at process (jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3603) jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3828 Uncaught TypeError: $(...).tabs is not a function at HTMLDocument.onDOMReady (tabs.self-5bccad3e0e615bd96bf323490a71829beec067511af628e9808993bb6beeb3a5.js?body=1:5) at mightThrow (jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3535) at process (jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3603) jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3828 Uncaught TypeError: $(...).bxSlider is not a function at HTMLDocument.<anonymous> (common.self-254867e35121332cc517676b19286d47dcc7ed9a91c5f428dbe2777f9c9873d4.js?body=1:17) at mightThrow (jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3535) at process (jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3603) dropdown-menu.self-5794b6ca26364ce522cb47a8ef050870fda0b886cfeef69ec27ef116900f1984.js?body=1:121 Uncaught TypeError: $(...).aaDropdownMenu is not a function at HTMLDocument.onDOMReady (dropdown-menu.self-5794b6ca26364ce522cb47a8ef050870fda0b886cfeef69ec27ef116900f1984.js?body=1:121) at HTMLDocument.dispatch (jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:5184) at HTMLDocument.elemData.handle (jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:4992) at Object.e.dispatch (turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1:6) at r.notifyApplicationAfterPageLoad (turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1:7) at r.visitCompleted (turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1:7) at r.complete (turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1:6) at r.<anonymous> (turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1:6) at turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1:6
該当のソースコード
app/assets/javascripts/jquery.bxslider.min.js
erb
1app/views/coupons/index.html.erb 2 3<div class="container"> 4 <div class="tabContainer"> 5 <div class="tab"> 6 <% @selected_categories.each do |category| %> 7 <div class="tab__button"><a href="#"><%= category.name %></a></div> 8 <!-- 一つ目にclassでactive追加しなくては --> 9 <% end %> 10 <script> 11 $(".tab__button:first-child").addClass("active"); 12 </script> 13 </div> 14 </div> 15 <div class="contents"> 16 <% @selected_categories.each do |category| %> 17 <div class="contents__content"> 18 <% category.coupons.each do |coupon| %> 19 <div class="coupon-thumbnail"> 20 <%= link_to coupon do %> 21 <%= image_tag coupon.image.to_s %> 22 <% end %> 23 </div> 24 <% end %> 25 </div> 26 <% end %> 27 </div> 28</div>
js
1app/assets/javascripts/common.js 2 3$(document).ready(function(){ 4 5/****************************************** 6事前準備 7*******************************************/ 8 9//タブボタンの数を取得 10var tabQuantity = $('.tab__button').length; 11 12//タブの長さとボディの長さの差分を取得 13var tabExtraDistance = $('.tab').width() - $('.tabContainer').width(); 14 15/****************************************** 16スライダー発動 17*******************************************/ 18 19var slider = $('.contents').bxSlider({ 20 pager:false, 21 controls:false, 22 onSlideBefore: function($slideElement, oldIndex, newIndex){ 23 //スライドする時に関数を呼び出す。newIndexはスライダーの現在地。 24 slideChange(newIndex); 25 } 26}); 27 28/****************************************** 29スライドする時に発動する関数。タブの表示調整を行う。 30*******************************************/ 31 32function slideChange(newIndex){ 33 34 //クラスを調整 35 $('.tab__button').removeClass('active'); 36 $('.tab > div:nth-child(' + ( newIndex + 1 ) + ')').addClass('active'); 37 38 //スクロールするべき距離を取得。タブ全体の長さ / ( タブの個数 - 1 ) * スライドの現在地 39 var scrollDestination = ( tabExtraDistance / (tabQuantity - 1) ) * ( newIndex ); 40 41 //スクロール位置を調整 42 $('.tabContainer').animate({ scrollLeft: scrollDestination }, 'slow'); 43 44} 45 46/****************************************** 47タブボタンクリックで発動する関数 48*******************************************/ 49 50$('.tab__button').on('click',function(e){ 51 52 //何番目の要素かを取ってスライドを移動する 53 var nth = $('.tab__button').index(this); 54 slider.goToSlide(nth); 55 56 //クリックイベントを無効化 57 e.preventDefault(); 58 59}) 60 61console.log("読み込めてるで"); 62 63}); 64
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/04/19 05:36
2019/04/19 06:21 編集