如何不通过单击操作触发多个表单div

Question

我的页面上有多个隐藏的表单； 每个都应由相应的span元素触发。 span元素都共享一个类，并且当单击特定的span元素时，我只希望相应的表单显示在模式窗口中（我在我的模式窗口中使用easyModal.js jQuery插件）。 我当前的设置是将所有表单加载到单独的模式窗口中，而不仅仅是将一个表单对应于单击的一个跨度项目。

我的span元素的示例代码为：

<span class="open-modalwindow">Find by List ID</span>

我的每种形式都与此类似，只是对每种形式做了很小的改动：

<div id="submission_byListID" class="modalform" style="display: none; position: fixed; z-index: 8; left: 50%; top: 50%; margin-left: -200px; margin-top: -134.5px;">
<div class="header">
    <h3>Search by List ID</h3>
</div>
<form action="">
    <div class="txt">
        <label for="ListID">ListID:</label>
        <input type="text" name="" id="bylistID_input">
    </div>
    <div class="btn clearfix">
        <a class="close" href="#">Submit</a>
        <a class="close cancel" href="#">Cancel</a>
    </div>
</form>

我用来处理跨度元素单击的jQuery函数是：

$('.open-modalwindow').each(function(){
   $(this).click(function(){
    $("div[class*='modalform']").trigger('openModal');
   });
});

我理解为什么存在该行为，毕竟我要说的是，对于具有“ open-modalwindow”类的每个项目，请为具有“ modalform”的类名称的每个项目打开模式窗口。

由于我最终将在页面上使用大约20种不同的形式，因此我试图避免为每个span元素赋予唯一的ID，并使用单独的jQuery click处理程序，例如：

$('#SomeSpanElementID').click(function(){
   $('#SomeFormElementID').trigger('openModal');
});

有没有一种简单的方法可以简化此流程，而不是显式声明20个单独的jQuery Click处理函数以显示20种不同形式？

Answer 1

您需要一种将跨度与表单关联的方法。 例如，您可以使用数据属性来指定ID：

<span class="open-modalwindow" data-form="submission_byListID">Find by List ID</span>

然后，您可以使用数据查找表单。 您不需要使用each来遍历元素并为每个事件绑定一个单独的处理程序，您可以将相同的事件处理程序绑定到所有这些事件处理程序：

$('.open-modalwindow').click(function(){
  $("#" + $(this).data('form')).trigger('openModal');
});