Как использовать метод jQuery hover () для Ruby в версии Rails 6.0.2.2 - PullRequest
Новая
       60

Как использовать метод jQuery hover () для Ruby в версии Rails 6.0.2.2

0 голосов
/ 05 апреля 2020

Я хотел бы выучить ruby на рельсах, и я отслеживаю какой-то проект. Я хочу увидеть объяснение, когда наведу курсор мыши на фотографию. Я знаю, как я могу использовать jquery hover, но только рельсы 5.2 версия , но у меня есть рельсы 6.0.2.2 версия . Теперь, как я могу использовать hover для rails 6.0. Версия 2.2 . Вы можете увидеть сообщение об ошибке и мою фотографию на скриншоте. И, наконец, спасибо за вашу помощь

Ошибка ScreenShot = [[1]: https://i.stack.imgur.com/CjTUF.png]

связанная строка кода для jquery Наведение Снимок. 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 %>

У меня есть jquery в Gemfile, как это. Gemfile 

gem 'jquery-rails', '~> 4.3', '>=4.3.1'

1 Ответ

0 голосов
/ 06 апреля 2020

Я нашел решение. В Rails 6 появилось несколько новых инноваций.

В нашем приложении Rails выполните команду ниже, чтобы добавить jQuery. 

$ yarn add jquery

Это сохранит зависимость jquery для нашего приложения.

Теперь, чтобы проверить, установлен jquery или нет, проверьте следующие файлы 

package.json => "jquery": "^3.3.1",
yarn.lock => jquery@^3.3.1:

Добавьте приведенный ниже код в среду. 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

Требуется jquery в приложении. js файл. это выглядит так, 

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("jquery")

Это все. Вы можете использовать jquery в своем проекте

...