Rails 7 JQuery不起作用，但在源代码中显示

我有一个新的Rails 7应用程序(使用Bootstrap 5(，它存在Jquery问题。例如，我有一个使用click()到addClass的图像库函数。

$("#gallery1").click(function() {
$(".gallery-image").removeClass("activeImg");
$("#gallery1").addClass("activeImg");
$(".expandedImg").addClass("hidden");
$("#expandedImg1").removeClass("hidden");
});
$("#gallery2").click(function(){
$(".gallery-image").removeClass("activeImg");
$("#gallery2").addClass("activeImg");
$(".expandedImg").addClass("hidden");
$("#expandedImg2").removeClass("hidden");
});
$("#gallery3").click(function(){
$(".gallery-image").removeClass("activeImg");
$("#gallery3").addClass("activeImg");
$(".expandedImg").addClass("hidden");
$("#expandedImg3").removeClass("hidden");
});
$("#gallery4").click(function(){
$(".gallery-image").removeClass("activeImg");
$("#gallery4").addClass("activeImg");
$(".expandedImg").addClass("hidden");
$("#expandedImg4").removeClass("hidden");
});

.hidden { display: none; }
.gallery-column {
float: left;
margin-bottom: 15px;
overflow-y: hidden;
}
.gallery-column img {
opacity: 0.8; 
cursor: pointer; 
height: 50px;
width:  auto;
padding-right: 10px;
}

.gallery-column img:hover, {
opacity: 1;
}
.activeImg {
opacity: 1 !important;
}
.gallery-row:after {
content: "";
display: table;
clear: both;
}
.gallery-container {
position: relative;
}
#imgtext {
position: absolute;
bottom: 15px;
left: 15px;
color: white;
font-size: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="gallery-row">
<div class="gallery-column">
<img class="gallery-image" id="gallery1" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/71/2010-kodiak-bear-1.jpg/1200px-2010-kodiak-bear-1.jpg" alt="Nature" style="width:100%">
</div>
<div class="gallery-column">
<img class="gallery-image" id="gallery2" src="http://img-aws.ehowcdn.com/750x500/photos.demandstudios.com/getty/article/151/79/78434875_XS.jpg" alt="Snow" style="width:100%">
</div>
<div class="gallery-column">
<img class="gallery-image" id="gallery3" src="https://www.treehugger.com/thmb/bLC-d0nHE4IcHVwuPJwqPwoSV80=/5048x2839/smart/filters:no_upscale()/GettyImages-92417062-fdfbe3576bc94b9698d44d1ed8475a35.jpg" alt="Mountains" style="width:100%">
</div>
<div class="gallery-column">
<img class="gallery-image" id="gallery4" src="https://kodiakbearcenter.com/wp-content/uploads/2021/03/BEARS-137-1213x1820.jpg" alt="Lights" style="width:100%">
</div>
</div>
<div class="gallery-container">
<img id="expandedImg1" class="expandedImg" style="width:100%" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/71/2010-kodiak-bear-1.jpg/1200px-2010-kodiak-bear-1.jpg">
<img id="expandedImg2" class="hidden expandedImg" style="width:100%" src="http://img-aws.ehowcdn.com/750x500/photos.demandstudios.com/getty/article/151/79/78434875_XS.jpg">
<img id="expandedImg3" class="hidden expandedImg" style="width:100%" src="https://www.treehugger.com/thmb/bLC-d0nHE4IcHVwuPJwqPwoSV80=/5048x2839/smart/filters:no_upscale()/GettyImages-92417062-fdfbe3576bc94b9698d44d1ed8475a35.jpg" alt=>
<img id="expandedImg4" class="hidden expandedImg" style="width:100%" src="https://kodiakbearcenter.com/wp-content/uploads/2021/03/BEARS-137-1213x1820.jpg" a>
<div id="imgtext"></div>
</div>

它在JSFiddle中工作得很好，但在应用程序上会产生控制台错误，称为Uncaught ReferenceError: $ is not defined。。。。这与我从fiddle中删除JQuery时得到的错误相同。

以下是我的相关宝石：

ruby "3.0.0"
gem "rails", "~> 7.0.1"
# THE PRESETS
gem "sprockets-rails"
gem "pg", "~> 1.1"
gem "puma", "~> 5.0"
# gem "sassc-rails"
gem "importmap-rails"
gem "stimulus-rails"
gem "jbuilder"
gem "tzinfo-data", platforms: %i[ mingw mswin x64_mingw jruby ]
gem "bootsnap", require: false
# OTHER NECESSARY STUFF
gem 'jquery-rails'
gem 'jquery-ui-rails'
gem 'bcrypt', '~> 3.1.7'
gem 'gon'
gem 'sass-rails'
# ESSENTIALS
gem 'devise'
gem 'simple_form'
gem 'bootstrap', '~> 5.1', '>= 5.1.3'
gem 'friendly_id', '~> 5.2.0'
gem 'invisible_captcha'
gem 'figaro'
gem 'high_voltage', '~> 3.1'
# STYLE STUFF
gem 'font_awesome5_rails'
gem 'tinymce-rails'
gem 'jquery-matchheight-rails'

这是我的application.js:

import "controllers"
import "jquery"
import "jquery_ujs"
import "popper"
import "bootstrap"

//= require jquery3
//= require jquery_ujs
//= require jquery-ui
//= require popper
//= require bootstrap
//= require jquery.matchHeight
//= require activestorage
//= require font_awesome5
//= require tinymce
//= require_tree .

window.jQuery = $;
window.$ = $;

这是config/importmap.rb:

pin "application", preload: true
pin_all_from "app/javascript/controllers", under: "controllers"
pin "jquery", to: "jquery.min.js", preload: true
pin "jquery_ujs", to: "jquery_ujs.js", preload: true
pin "popper", to: "popper.js", preload: true
pin "bootstrap", to: "bootstrap.min.js", preload: true
pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true

我已经在chrome检查器中检查了我的源选项卡，您可以看到assets文件夹中列出的Jquery.min、Jquery-ujs和popper。在这一点上，我已经删除了涡轮链接(或与之相当的Rails7(，原因有很多，所以至少这不应该是一个因素。

我甚至尝试在资产管道之外的application.html.erb中包含jquery的CDN版本。。。但这并没有改变任何事情。这是当前application.html.erb头：

<head>
<title>
<%= if content_for?(:title) then yield(:title) + ' | ' end %>
Website Title
</title>
<%= if content_for?(:head) then yield(:head) end %>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag "application" %>
<%= javascript_importmap_tags %>
<%= include_gon %>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CDNs -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/6.1.2/tinymce.min.js" integrity="sha512-cJ2vUNryvHzgNJfmFTtZ2VX5EMT5JOU1i8nm+L1kwoHQ9bSqSYdswxyk++9Gi27p3BG2rXZXLMsTsluY4RZSSw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
tinymce.init({
selector: '.tinymce'
});
</script>
</head>

有人看到我的JQuery搞砸了吗？我是Rails 7的新手，完全被阻碍了！