我只添加了使用CDN的JQuery，我把代码放在头部，在_head.html.erb这是一个：

<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>

字符串
然后，我使用了这段代码，并将其放在show.html.erb中的某个位置

<script>
var carouselWidth = $('.carousel-inner')[0].scrollWidth;
var cardWidth = $('.carousel-item').width();

var scrollPosition = 0;

$('.carousel-control-next').on('click', function(){
    console.log('next');
    scrollPosition = scrollPosition + cardWidth;
    $('.carousel-inner').animate({scrollLeft: scrollPosition}, 600);
});
</script>

型
我不知道还可以把jquery代码放在哪里，但是当我在浏览器中打开控制台时，我得到了这个错误：

menu-f19d6842a068966109ba6a8b3de0283869f632ec673afe222888bbeba8442401.js:7 Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
    at addToggleListener (menu-f19d6842a068966109ba6a8b3de0283869f632ec673afe222888bbeba8442401.js:7:26)
    at HTMLDocument.<anonymous> (menu-f19d6842a068966109ba6a8b3de0283869f632ec673afe222888bbeba8442401.js:15:9)
    at S (turbo.es2017-esm.js:344:34)
    at Object.notifyApplicationAfterPageLoad (turbo.es2017-esm.js:3158:16)
    at Object.pageBecameInteractive (turbo.es2017-esm.js:3080:14)
    at he.pageIsInteractive (turbo.es2017-esm.js:2486:27)
    at he.pageIsComplete (turbo.es2017-esm.js:2490:14)
    at HTMLDocument.interpretReadyState (turbo.es2017-esm.js:2458:22)
addToggleListener @ menu-f19d6842a068966109ba6a8b3de0283869f632ec673afe222888bbeba8442401.js:7
(anonymous) @ menu-f19d6842a068966109ba6a8b3de0283869f632ec673afe222888bbeba8442401.js:15
S @ turbo.es2017-esm.js:344
notifyApplicationAfterPageLoad @ turbo.es2017-esm.js:3158
pageBecameInteractive @ turbo.es2017-esm.js:3080
pageIsInteractive @ turbo.es2017-esm.js:2486
pageIsComplete @ turbo.es2017-esm.js:2490
interpretReadyState @ turbo.es2017-esm.js:2458

型

编辑

menu.js文件：

function addToggleListener(selected_id, menu_id, toggle_class) {
        let selected_element = document.querySelector(`#${selected_id}`);
        selected_element.addEventListener('click', function(event){
                event.preventDefault();
                let menu = document.querySelector(`#${menu_id}`)
                menu.classList.toggle(toggle_class);
        });
}

document.addEventListener('turbo:load', function(){
        addToggleListener('hamburger', 'navbar-menu', 'collapse');
        addToggleListener('account', 'dropdown-menu', 'active');
});

型

// menu.js function toggleMenu(event, selectedId, menuId, toggleClass) { const selected = event.target.closest(selectedId) if (selected) { event.preventDefault(); const menu = document.querySelector(menuId) menu.classList.toggle(toggleClass); } } document.addEventListener("click", function(event){ toggleMenu(event, "#hamburger", "#navbar-menu", "collapse"); toggleMenu(event, "#account", "#dropdown-menu", "active"); });

// menu.js document.addEventListener("click", function(event){ const toggler = event.target.closest("[data-toggle]") if (toggler) { event.preventDefault(); const menu = document.querySelector(toggler.dataset.toggle) menu.classList.toggle(toggler.dataset.toggleClass); } });

1条答案

按热度按时间

gcuhipw91#

你想给selected_element.addEventListener元素添加一个监听器，但页面上没有“hamburger”或“account”元素。使用事件委托是Turbo更好的方法：

字符串
您可能需要考虑使用data属性来控制模板的行为。这样您就不必添加更多的toggleMenu调用：

<div data-toggle="#navbar-menu" data-toggle-class="collapse">hamburger</div>

<div id="navbar-menu" class="collapse">navbar menu</div>

<div data-toggle="#dropdown-menu" data-toggle-class="active">hamburger</div>

<div id="dropdown-menu" class="active">account menu</div>

的字符串

https：turbo.hotwired.dev/handbook/building#installing-javascript-behavior**https://learn.jquery.com/events/event-delegation/*

赞(0）回复(0）举报 2023-11-20

ruby-on-rails JQuery事件侦听器错误，当使用Rails 7时

1条答案

相关问题

热门标签

最新问答