在从ruby on rails中的资产管道加载的布局上链接Javascript函数
Linking a Javascript function on a layout that is loaded from the asset pipeline in ruby on rails?
当我在检查时从静态页面布局中的资产管道加载的javascript文件(app/assets/javascripts/bootstrap.js)链接函数时,我得到:Uncaught ReferenceError:myFunction未定义。我已经在谷歌上搜索了几个小时,在不使用Coffeescapet、Jquery或ruby内部的方法的情况下,我只想将这个函数从我的.js文件链接到我的视图中的布局中。任何具体的解释,或者如果你能把我链接到任何关于如何做到这一点的资源。。。或者是一个教程,旨在快速将Javascript链接到视图中,而不会干扰管道,这将是非常棒的。提前谢谢。
这是Javascript函数:
/* When the user clicks on the button,
toggle between hiding and showing dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i=0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
这是相应的css:
/* Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Show the dropdown menu (use JS to add this class to the .dropdown- content container when the user clicks on the dropdown button) */
.show {display:block;}
这是我的html:
<li>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
<a href="#work_places">Work Places</a>
<a href="#living_places">Living Places</a>
<a href="#learning_places">Learning Places</a>
<a href="#interiors">Interiors</a>
<a href="#miscellaneous">Miscellaneous</a>
</div>
</div>
</li>
尝试以这种方式定义您的函数,(希望)使其在您的视图中具有全局性和可访问性:
this.myFunction = function() {
document.getElementById('myDropdown').classList.toggle('show');
};
否则,您可以从视图中删除onclick,并将其附加到javascript文件中:
document.getElementsByClassName('dropbtn')[0].onclick = function() {
document.getElementById('myDropdown').classList.toggle('show');
};
相关文章:
- 在HTML/JavaScript中,有没有一种方法可以在图像开始加载时知道图像的最终布局尺寸
- 同位素分页布局?或者至少是增量加载
- 砖石事件:在图像加载和布局完成后调用事件
- 在从ruby on rails中的资产管道加载的布局上链接Javascript函数
- j查询延迟布局的重新加载
- D3 强制布局图 从文件加载数据
- jQuery加载弄乱了布局
- 如何从 JSON 扩展子项,单击父级 - D3.Js - 强制定向布局后加载数据
- 如何使主布局中的脚本在加载时应用于 angularjs 视图
- 如何在页面加载之前调整布局
- 强制可折叠布局中的分布式 json 加载
- 图形获胜'无法正确重新加载到D3部队布局中
- Zend Framework加载视图而不重新加载布局模板
- 使用webpack代码拆分,如何加载块和HTML布局
- 如何在angularjs中加载不同的布局
- HTML -使用媒体查询来加载单独的布局
- 避免在ruby on rails项目中重新加载布局
- 加载网页的初始数据与ajax在砌体布局
- 图像延迟加载响应式布局
- 如何加载同位素布局与图像完美的位置上的差距,甚至在整个页面加载之前