[英]How to call javascript function on all elements with the same classname
I am trying to get a pop-up window to display when a user clicks on an element on my page.我试图在用户单击我页面上的元素时显示一个弹出窗口。 I have all the functionality for the pop-up working correctly;
我有弹出窗口正常工作的所有功能; however, I am having trouble getting the function to pop-up for every element that matches the specified classname.
但是,我无法为与指定类名匹配的每个元素弹出该函数。 My code is below:
我的代码如下:
<script>
function descPop () {
// Description pop-up
// Get the modal
var modalprod = document.getElementById('myModalTwo');
// Get the button that opens the modal
var btnprod = document.getElementsByClassName("add-but")[0];
// Get the <span> element that closes the modal
var spanprod = document.getElementsByClassName("prod-close")[0];
// When the user clicks on the button, open the modal
btnprod.onclick = function() {
modalprod.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
spanprod.onclick = function() {
modalprod.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modalprod) {
modalprod.style.display = "none";
}
}
}
</script>
Now, I know that currently this code is assigning index 0 to var btnprod;现在,我知道目前这段代码正在将索引 0 分配给 var btnprod; therefore, it will only pop-up when you click on the first element which matches the classname "add-but".
因此,它只会在您单击与类名“add-but”匹配的第一个元素时弹出。 How do I assign and access all elements, so that every tag with the classname "add-but" will pop-up the window?
我如何分配和访问所有元素,以便每个带有类名“add-but”的标签都会弹出窗口?
Thanks谢谢
Solution:解决方案:
function descPop () {
// Description pop-up
// Get the modal
var modalprod = document.getElementById('myModalTwo');
// Get the button that opens the modal
var btnprod = document.getElementsByClassName("add-but");
// Get the <span> element that closes the modal
var spanprod = document.getElementsByClassName("prod-close");
// When the user clicks on the button, open the modal
for (var i = 0; i < btnprod.length; i++) {
btnprod[i].onclick = function() {
modalprod.style.display = "block";
}
}
// When the user clicks on <span> (x), close the modal
for (var i = 0; i < spanprod.length; i++) {
spanprod[i].onclick = function() {
modalprod.style.display = "none";
}
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modalprod) {
modalprod.style.display = "none";
}
}
}
If Jquery is not an option, you could iterate over the HtmlCollection to do it:如果 Jquery 不是一个选项,您可以遍历 HtmlCollection 来执行此操作:
var btnprod = document.getElementsByClassName("add-but"); // <- this gives you a HTMLCollection
for (var i = 0; i < btnprod.length; i++) {
btnprod[i].onclick = function() {
modalprod.style.display = "block";
}
}
you can change your code to the following:您可以将代码更改为以下内容:
$('.add-but').on('click', function() { $(this).css('display', "none"); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="add-but"> fafafafafa </div> <br> <div> fafafaffafafaafafa </div> <br> <div class="add-but"> fafafafafafafaafafafaffafa </div>
note that i have changed the display to none instead of block for this example.请注意,对于此示例,我已将显示更改为无而不是块。
this uses the jQuery selectors, event binding and css function.这使用了 jQuery 选择器、事件绑定和 css 函数。
I'd prefer that sexier solution:我更喜欢更性感的解决方案:
document.getElementsByName('add-but').forEach(btn => {
btn.onclick = (e) => {
btn.style.display = "block"
}
});
Same in one line:同一行:
document.getElementsByName('add-but').forEach(btn => btn.onclick = (e) => btn.style.display = "block" );
If you want have multiples clicks events on same btn:如果你想在同一个 btn 上有多次点击事件:
document.getElementsByName('add-but').forEach(btn => btn.addEventListener('click', e => btn.style.display = "block" ));
You've added a jquery tag but there's no jquery here.您已经添加了一个 jquery 标签,但这里没有 jquery。 With jquery you can just write:
使用 jquery 你可以只写:
$('.classname').on ('click', function () {
//activate modal
});
Alternatively, you can add them to a variable as a collection, referencing this variable will apply to any element with this class.或者,您可以将它们作为集合添加到变量中,引用此变量将应用于具有此类的任何元素。
var x = $('.classname');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.