Ruby on Rails 6.0.2.2 版如何使用jQuery hover() 方法

Posted 2023-05-09

【中文标题】Ruby on Rails 6.0.2.2 版如何使用jQuery hover() 方法

【英文标题】：How to use jQuery hover() Method for Ruby on Rails 6.0.2.2 version

【发布时间】：2020-07-17 14:24:31

【问题描述】：

我想在 Rails 上学习 ruby​​，我正在处理一些项目。当我用鼠标悬停在照片上时，我想看到解释。我知道，我如何使用 jquery hover 但只有 rails 5.2 版本 但我有 rails 6.0.2.2 版本。现在我如何在 rails 6.0 中使用悬停。 2.2 版本 。您可以在屏幕截图上看到错误消息和我的照片。最后感谢您的帮助

错误截图 = [[1]: https://i.stack.imgur.com/CjTUF.png]

jquery Hover 的相关代码行 Shot.js

shotHover() 
                $('.shot').hover(function() 
                    $(this).children('.shot-data').toggleClass('visible');
                );
            

Shots.shotHover();

application.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)

index.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 将 webpacker 用于 javascript 资产。看到这个问答：***.com/questions/54905026/…

【参考方案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