![](/img/trans.png)
[英]Ruby on Rails - How to Use HTML Coordinates in a Rails Method?
[英]How to use jQuery hover() Method for Ruby on Rails 6.0.2.2 version
我想在軌道上學習 ruby 並且我正在處理一些項目。 當我用鼠標在照片上 hover 時,我想看到一個解釋。 我知道,我如何使用 jquery hover 但只有軌道5.2 版本但我有軌道6.0.2.2 版本。現在我如何使用 ZE0542F579DF8E8138ADE69F6F8 版本的軌道您可以在屏幕截圖上看到錯誤消息和我的照片。 最后感謝您的幫助
錯誤截圖= [[1]: https://i.stack.imgur.com/CjTUF.png]
jquery Hover Shot.js的相關代碼行
shotHover() {
$('.shot').hover(function() {
$(this).children('.shot-data').toggleClass('visible');
});
}
Shots.shotHover();
應用程序.js
// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("shots")
// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)
索引.html.erb
<%= link_to shot, class: "shot" do %>
<%= image_tag(shot.user_shot_url) %>
<div class="shot-data">
<h3 class="shot-title"><%= shot.title %></h3>
<div class="shot-description"><%= truncate(shot.description, length: 60) %></div>
<div class="shot-time">
<%= time_ago_in_words(shot.created_at) %>
</div>
</div>
<% end %>
我在 Gemfile 中有這樣的 jquery。 寶石文件
gem 'jquery-rails', '~> 4.3', '>=4.3.1'
我找到了解決方案。 Rails 6 有一些新的創新。
在我們的 Rails 應用程序中運行以下命令以添加 jQuery。
$ yarn add jquery
它將 jquery 的依賴關系保存到我們的應用程序中。
現在驗證 jquery 是否安裝,檢查以下文件
package.json => "jquery": "^3.3.1",
yarn.lock => jquery@^3.3.1:
在 environment.js 中添加以下代碼
const webpack = require('webpack')
environment.plugins.prepend('Provide',
new webpack.ProvidePlugin({
$: 'jquery/src/jquery',
jQuery: 'jquery/src/jquery'
})
)
現在,我們的文件看起來像,
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
在 application.js 文件中需要 jquery。 它看起來像,
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("jquery")
就是這樣。您可以在您的項目中使用 jquery
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.