javascript - 如何使用 Rails 5 + jQuery 保持通过 Turbolinks 提交的页面状态
问题描述
我试图在section
单击另一个元素时显示/隐藏 a 。很简单的东西,我让它工作正常。问题是:这是一个待办事项列表;任务是通过 Ajax(使用 Turbolinks、数据远程等)创建和检查的,当发生这种情况时,显示/隐藏操作将停止工作,直到我再次手动重新加载页面。即使我使用 localStorage,它也会丢失该部分是否隐藏的状态,如下所示:
$(document).ready(function(){
if (localStorage.getItem("revealed?") === "true") {
$('#completed').removeClass('hide');
} else {
$('#completed').addClass('hide');
}
$('#show_completed').click(function(){
if (localStorage.getItem("revealed?") === "false") {
$('#completed').removeClass('hide');
localStorage.setItem("revealed?", "true");
} else {
$('#completed').addClass('hide');
localStorage.setItem("revealed?", "false");
}
});
});
我已经尝试了所有我能想到的 JS 方面的解决方案,并且一切都在某种程度上起作用,但是当自动提交任务时它们仍然会中断。
我难住了。是 jQuery 和 Turbolinks 之间的某种幕后干扰吗?我错过了什么?
解决方案
可能有一个解决方案是on()
在jquery中使用,您可以通过以下更改来实现,如果没有,让我们尝试另一种方式
$(document).ready(function(){
toggleItem();
$('#show_completed').on('click', function(){
if (localStorage.getItem("revealed?") === "false") {
$('#completed').removeClass('hide');
localStorage.setItem("revealed?", "true");
toggleItem()
} else {
$('#completed').addClass('hide');
localStorage.setItem("revealed?", "false");
toggleItem();
}
});
});
toggleItem = function(){
if (localStorage.getItem("revealed?") && localStorage.getItem("revealed?") === "true") {
$('#completed').removeClass('hide');
} else {
$('#completed').addClass('hide');
}
}
推荐阅读
- java - 迁移到 Java 8 时无法解决 import org.apache.commons
- r - data.frame 中的错误或重复的 row.names
- javascript - Javascript中实例上的drawImage
- python - 无法使用 scipy.optimize.curve_fit 拟合 ECDF
- python - 我在 Python 中有无效的语法
- python - 没有空白行的 Scrapy csv 导出
- swift - 如何使用 GMSPlacePickerViewController 类?
- javascript - 如何通过 JavaScript 使进度条缓慢移动
- ansible - 如何在引用 add_host 中的主机变量时遍历 Ansible 库存
- c# - 在 c# 中的 Label 之后未分配字符串