我的页面上有多个隐藏的表单; 每个都应由相应的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种不同形式?

===============>>#1 票数:3 已采纳

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

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

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

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

  ask by aywhatsallthis translate from so

未解决问题?本站智能推荐: