Question

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

我的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>

我用来处理span元素点击的jQuery函数是：

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

我理解为什么行为存在，毕竟我说对于每个带有'open-modalwindow'类的项目，打开每个项目的模态窗口，其中包含一个包含'modalform'的类名。

因为我最终会在页面上显示大约20种不同的表单，所以我试图避免为每个span元素赋予一个唯一的ID，并且有一个单独的jQuery单击处理程序，如：

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

有没有简单的方法来简化这一点，而不是明确地说明20个单独的jQuery点击处理函数来显示我的20种不同形式？

Answer 1

您需要一种方法将范围与表单相关联。例如，您可以使用data属性指定id：

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

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

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

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

1 个答案: