我有以下按钮按预期执行并关闭/打开所需的灯箱:
<a data-behaviour="closing-lightbox" href="#edit-class" class="button">Edit Details</a>
<a data-behaviour="closing-lightbox" href="#move-class-year" class="button">Move Class</a>
<a data-behaviour="closing-lightbox" href="#delete-single-class" class="button button--error">Delete Class</a>
我试图在更改下拉措施时发生相同的行为:
<%= f.input_field :file, as: :file, data: {behaviour: 'file-upload closing-lightbox'}, href: '#upload-csv', class: 'file-upload-hide' %>
这不是触发的,也不将"关闭点框"函数分配给Onchange属性。我有什么办法可以将数据 - 行为和onchange属性组合起来,以便将其调用?
预先感谢
编辑:
我有以下内容:
$(document).ready(function(){
$("#csv_file").on("change", function(){
var box = document.getElementById("upload-csv")
box.style.display = "block";
})
});
我是否有任何方法可以使用HREF属性来调用此功能内部的数据键合方法(是否是一种方法?)?预先感谢!
数据属性只是将任何任意数据附加到元素的有效方法。
所以没有 - 它不是一种方法。您可以使用CSS属性选择器:
将事件处理程序附加到具有特定数据属性的元素上。
$(document).on('click', '*[data-behaviour="closing-lightbox"]', function(){
console.log('Eureka!');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button data-behaviour="closing-lightbox">Click me</button>
但是,使用类来附加行为实际上要快一些(更简单),因为它使用document.getElementsByClassName
与document.querySelectorAll
。