0

我在让我的 javascripts 在 Ruby 中运行时遇到了很多麻烦。我希望有人可以帮助我理解我所犯的错误，因为我自己无法解决这个问题。

我正在尝试按照本教程在 JS 中创建图像滑块。

我的 Rails 文件：

宝石文件

gem 'coffee-rails', '~> 4.2'

# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.5'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 4.0'
# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'

gem 'jquery-rails', '~> 4.3', '>= 4.3.3'
gem 'rails-ujs', '~> 0.1.0'
gem 'jquery-ui-rails'

_header.html.erb

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Title</title>

<%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

<%= javascript_include_tag( 'slider.js' ) %>

</head>
<body> <!--Body and html tags are closed in my _footer.html.erb -->

应用程序.js

//= require rails-ujs
//= require jquery 
//= require jquery_ujs 
= require turbolinks


$(document).ready to $(document).on('turbolinks:load', function(main());

//image slider code
//
//

const carouselSlide = document.querySelector('.carousel-slide');

const carouselImages = document.querySelectorAll('.carousel-slide img');


//buttons

const prevBtn = document.querySelector('#prevBtn');
const nextBtn = document.querySelector('#nextBtn');


//Counter

let counter = 1;
const size = carouselImages[0].clientWidth;

carouselSlide.style.transform = 'translateX('+(-size * counter)+ 'px)';

滑块.html.erb

<button id="prevBtn">Prev</button>
<button id="nextBtn">Next</button>

<br /><br />

<div class="carousel-container">
<div class="carousel-slide"> 
<%= image_tag("photo4.jpg", id: "lastClone") %> 
<!-- photo1.jpg is an image of a road at sunset should have the border around it and be the focus. Currently, it is not. -->
<%= image_tag("photo1.jpg") %> 
<%= image_tag("photo2.jpg") %>
<%= image_tag("photo3.jpg") %>
<%= image_tag("photo4.jpg") %>
<%= image_tag("photo1.jpg", id: "firstClone") %>
</div>
</div>

滑块.scss

/* This is for a test slider */

.carousel-container {
  width: 1000px;
  border: 5px solid black;
}

.carousel-slide {
  display: flex;

  img{
    width: 1000px;
    height: auto;
  }
}

但是，我的 ruby​​ 应用程序中的任何 Javascript 都没有工作。根据我的 Javascript，焦点图像应该是我的#firstClone。

这是一个 imgur 链接，可以查看我的 ruby​​ 应用程序与常规 .html 文件的屏幕截图： https ://imgur.com/a/jVhjLd3

除了在我的 html 中使用诸如 ruby​​ image_tag 之类的东西之外，一切几乎都是一样的。我从我的 application.js 复制并粘贴了 JS。

编辑：来自 chrome 的控制台截图：https ://imgur.com/a/SQuHAXa

编辑：我将我的 = require turbolinks 更改为 /= require turbolinks

以下是我正在运行的版本：

红宝石：红宝石2.5.0p0（2017-12-25修订版61468）[x86_64-linux]

节点：v13.2.0

NPM：6.13.1

我尝试了一些通过谷歌搜索找到的不同建议（例如“快速修复”），所以如果有任何问题或不合适的地方，请指出给我。如果您需要更多信息/代码，我很乐意提供。

任何帮助让我的 Javascript 运行将不胜感激！

4

0 回答 0