Итак, я работаю с Rails 5.1 для создания веб-приложения и использую флажок CSS для открытия меню навигации.
У меня есть кнопка (на root_path), которая при нажатии использует Jquery, чтобы установить флажок из другой области. Он работает при переходе на страницу, но когда я перенаправляю на другую страницу, он перестает работать. Но консоль по-прежнему выводит true / false, когда я нажимаю кнопку регистрации, независимо от того, установлен флажок или нет. Таким образом, функции кнопок работают по нажатию, но флажок не отображается как отмеченный.
Я потратил много времени, играя с jquery, отключая турболинки на кнопке home, которая обновляется, и т. Д. Интересно, есть ли у кого-нибудь способ обойти это или если rails 5 привередливы с этим материалом.
Вот фрагмент кода для двух кнопок в _index.html.erb
<div class="index__content--buttons">
<%= link_to("Find Out More", root_path, :class => "btn btn--primary", data: { no_turbolink: true }) %>
<%= link_to("Explore the Culture", "javascript:void(0)", :class => "btn btn--primary", :id => "navbtn") %>
</div>
Вот код из моего _nav.scss:
// functionality of nav box
&__checkbox:checked ~ &__background {
transform: scale(60);
}
&__checkbox:checked ~ &__nav {
opacity: 1;
width: 100%;
z-index: 1500;
}
&__checkbox:checked ~ &__nav > &__list > &__item {
visibility: visible;
}
Вот весь index.js
$(document).ready(function() {
const navigation = document.querySelector('.navigation');
const navCheckbox =
navigation.querySelector('.navigation__checkbox');
const navItems = navigation.querySelectorAll('.navigation__item');
navCheckbox.checked = false;
function uncheck(){ $(navCheckbox).prop('checked', false) }
navItems.forEach(item => item.addEventListener("click", _ =>
navCheckbox.checked = false));
$(document).on("click", "#navbtn", function (){
uncheck();
console.log(navCheckbox['checked'] === true);
$(navCheckbox).prop('checked', true);
console.log(navCheckbox['checked'] === true);
});
});
Стоит отметить фактическую кнопку-флажок и ярлык ВСЕГДА работает. И цикл navItems для должен снять флажок после щелчка ссылки навигации.
Также я использую jquery3, у меня есть гем 'jquery-rails', application.js:
//= require jquery3
//= require jquery_ujs
//= require turbolinks
//= require_tree .
Так почему же это не работает при перенаправлении root_path?
Редактировать: только что протестировано, оно не работает после ЛЮБОГО перенаправления.
tldr: jquery работает при первом посещении. Затем не проверяет флажок (но регистрирует правильное состояние) при любом перенаправлении.
Заранее спасибо