javascript - 将新函数绑定(bind)到页面上的各个元素

Question

这可能是个骗局，但我找不到我想要的确切内容。我想要的是将函数绑定(bind)到页面上的命名类元素，然后在后面的脚本中，针对这些区域调用函数。具体来说，我想调用类似的东西(在下面的示例中)...

$.each( $(".saveRegion"), function( idx, ele ){
    var valsToSave = $(ele).getValuesToSave();
    // shove the values to save into some construct
    // but only for the controls inside the two divs classed as "saveRegion"
});

我的页面是 Pug 文件中的一组条件包含。这很重要的原因是，各个页面可能不具有相同的控件集，但该区域或父 div 的子节点被视为一组信息。考虑一个表单，其中包含可能是一个区域的地址信息，以及可能是一个区域的性别、眼睛颜色和高度，如果相关表单需要这些信息，所有这些都作为单独的 Pug 文件包含在内。父页面只是想询问所有区域“给我您的信息，以便我可以编译并保存它”，并且每个包含的内容都应该能够对此做出响应。

我可能做得太过分了，是吧？

div.sampleRegions
    if user.height == "tall"
        include ./userTall.pug
    if user.something == "another value"
        include .anotherPage.pug
    if user.hair == "brown"
        include ./userBrownHair.pug

相关的 html 可能如下所示:

<div id="sampleRegions">
   <div class="saveRegion">
       <input class="form-control" id="txtUserName" type="text">
       <input class="form-control" id="txtPhone" type="text">
   </div>
   <div>
       <input class="form-control" id="favoriteColor" type="text">
   </div>
   <div class="saveRegion">
       <input class="form-control" id="txtCountry" type="text">
       <input class="form-control" id="txtLanguage" type="text">
   </div>
</div>

所以，我想将 getValuesToSave() 这样的函数绑定(bind)到 div，然后编写该 div 的 getValuesToSave() 函数的详细信息。我正在使用 Pug(以前称为 Jade)根据某些特定于用户的设置绘制表单，因此我正在使用的页面包括每个人都知道如何通过某些原型(prototype)函数获取和返回其特定页面部分的数据。我希望这是有道理的。

这将是一个抽象类或支持它的任何其他语言的函数重写的简单问题。我为系统处理编写 C# 服务器端的东西已经有大约 15 年了，这在那里是微不足道的。我确信我只是错过了一些 super 简单的东西。谢谢!

Answer 1

您可以使用 jQuery 插件来实现此目的。

示例可用 here .