##rails6 jqeueryに関する質問です。
cloud9で学習している初学者です。現在jqueryでアニメーションをつけたいと思っているのですが、導入が難航し、皆様のお力を貸していただきたいと思っています。どうぞよろしくお願いいたします。
https://qiita.com/masahisa/items/eaacb0c3b82f4a11fc13
こちらの方のを参考にし、jqueryを導入しようとしましたが、反応せず困っています。
一つ難解なのが、app/javascript/test.jsに書いたjavascriptは反応しているということです。
application.html.erb
<head> <title>Pastpaper</title> <%= csrf_meta_tags %> <%= csp_meta_tag %> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" integrity="sha256-UzFD2WYH2U1dQpKDjjZK72VtPeWP50NoJjd26rnAdUI=" crossorigin="anonymous" /> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> </head>
app/javascript/packs/application.js
require("@rails/ujs").start() require("turbolinks").start() require("@rails/activestorage").start() require("channels") require('jquery') require('test.js')
config/webpack/environment.js
const { environment } = require('@rails/webpacker') const webpack = require('webpack') environment.plugins.prepend('Provide', new webpack.ProvidePlugin({ $: 'jquery/src/jquery', jQuery: 'jquery/src/jquery' }) ) module.exports = environment
app/javascript/test.js
document.addEventListener('turbolinks:load', function() { // Get all "navbar-burger" elements const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0); // Check if there are any navbar burgers if ($navbarBurgers.length > 0) { // Add a click event on each of them $navbarBurgers.forEach( el => { el.addEventListener('click', () => { // Get the target from the "data-target" attribute const target = el.dataset.target; const $target = document.getElementById(target); // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu" el.classList.toggle('is-active'); $target.classList.toggle('is-active'); }); }); } });
回答1件
あなたの回答
tips
プレビュー