首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

我如何使用这个javascript在8个不同ID的不同模态上工作,而不需要对每个按钮重复相同的代码?

要实现在8个不同ID的不同模态上使用相同的JavaScript代码,可以使用以下方法:

  1. 使用类选择器或属性选择器来选择所有的模态框按钮,而不是使用ID选择器。这样可以将相同的代码应用于多个按钮,而不需要重复编写代码。
  2. 在JavaScript中,使用循环遍历所有的模态框按钮,并为每个按钮添加相同的事件处理程序。可以使用querySelectorAll方法选择所有的按钮,并使用forEach方法遍历它们。
  3. 在事件处理程序中,可以使用this关键字来引用当前被点击的按钮。通过this可以获取按钮的相关信息,如ID、属性等。
  4. 如果需要在事件处理程序中执行特定于每个模态框的操作,可以为每个按钮添加自定义属性,如data-targetdata-modal-id,并在事件处理程序中使用这些属性来识别和操作相应的模态框。

下面是一个示例代码:

HTML部分:

代码语言:txt
复制
<button class="modal-btn" data-target="modal1">打开模态框1</button>
<button class="modal-btn" data-target="modal2">打开模态框2</button>
<!-- 其他模态框按钮... -->

<div id="modal1" class="modal">模态框1内容</div>
<div id="modal2" class="modal">模态框2内容</div>
<!-- 其他模态框... -->

JavaScript部分:

代码语言:txt
复制
// 选择所有的模态框按钮
var modalBtns = document.querySelectorAll('.modal-btn');

// 为每个按钮添加事件处理程序
modalBtns.forEach(function(btn) {
  btn.addEventListener('click', function() {
    // 获取目标模态框的ID
    var targetModalId = this.getAttribute('data-target');
    
    // 根据ID获取目标模态框元素
    var targetModal = document.getElementById(targetModalId);
    
    // 执行特定于每个模态框的操作
    // ...
    
    // 显示目标模态框
    targetModal.style.display = 'block';
  });
});

在上述示例中,通过使用类选择器.modal-btn选择所有的模态框按钮,并使用querySelectorAll方法获取它们。然后,使用forEach方法遍历所有的按钮,并为每个按钮添加点击事件处理程序。在事件处理程序中,使用this关键字引用当前被点击的按钮,并通过getAttribute方法获取data-target属性的值,即目标模态框的ID。最后,根据ID获取目标模态框元素,并执行特定于每个模态框的操作,然后显示目标模态框。

这种方法可以避免重复编写相同的代码,并且可以在多个不同ID的模态框上使用相同的JavaScript代码。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

没有搜到相关的合辑

领券