Question

这个可能是一个骗子，但我找不到我想要的东西。我想要的是将一个函数绑定到页面上的命名类元素，然后在以后的脚本中，针对这些区域调用一个函数。具体来说，我想调用类似的东西（在下面的例子中）......

union()

我的页面是Pug文件中的一组条件包含。重要的原因是单个页面包含可能没有相同的控件集，但该区域或父div的子节点被视为一组信息。考虑一个包含可能是区域的地址信息的表单，以及可能是区域的性别，眼睛颜色和高度，如果有问题的表单需要该信息，则所有表格都包含在单独的Pug文件中。父页面只是想要求所有地区“给我你的信息，以便我可以编译并保存它”，并且每个包括应该能够回应它。

我可能过度了，是吗？

distinct()

有问题的html可能如下所示：

$.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"
});

所以，我想将一个像getValuesToSave（）这样的函数绑定到div，然后为该div的getValuesToSave（）函数编写细节。我正在使用Pug（以前的Jade）根据某些特定于用户的设置绘制表单，因此我正在使用的页面可以通过一些原型函数知道如何获取和返回其特定页面部分的数据。我希望这是有道理的。

这可能是抽象类或函数覆盖的简单问题，支持任何其他语言。我为系统处理编写了C＃服务器端的东西，用了15年，这在那里是微不足道的。我确信我只是错过了一些超级简单的东西。谢谢！

Answer 1

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

示例可用here。

Answer 2

你可以使用一个简单的函数来查找指定元素中的所有类型的输入元素，并将它们的值映射到{ [nameByAttribute]: value }类型的对象。

像这样：

＆＃13;

function getValues(selector, keyAttr) {
  var INPUTS = ['textarea', 'input', 'select'].join();
  var BOOL_INPUTS = ['checkbox', 'radio'];
  var NUMBER_INPUTS = ['range', 'number'];
  var regions = [].slice.call(document.querySelectorAll(selector));
  
  return regions.map(function(region) {
    var values = [].slice.call(region.querySelectorAll(INPUTS));
    return values.map(function(element, index) {
      var type = element.getAttribute('type');
      var key = element.getAttribute(keyAttr) || index;
      var value = element.value;
      if(BOOL_INPUTS.indexOf(type) > -1) value = element.checked;
      if(NUMBER_INPUTS.indexOf(type) > -1) value = +element.value;
      return { [key]: value };
    });
  });
}

document.querySelector('#save').addEventListener('click', function() {
  console.log(getValues('.saveRegion', 'id'));
});

＆＃13;

<div id="sampleRegions">
   <div class="saveRegion">
       <input class="form-control" id="txtUserName" type="radio">
       <input class="form-control" id="txtPhone" type="checkbox">
       <input class="form-control" id="txtPhone" type="range">
       <select idd="language">
          <option>EN</option>
          <option>DE</option>
          <option>FR</option>
       </select>
   </div>
   <div>
       <input class="form-control" id="favoriteColor" type="text">
   </div>
   <div class="saveRegion">
       <input class="form-control" id="txtCountry" type="text" value="textInput">
       <textarea class="form-control" id="txtLanguage">textArea</textarea>
   </div>
   <button id="save">save</button>
</div>

＆＃13;

这可以很容易地扩展为将映射作为输入，它定义了应该如何处理某些输入。

Answer 3

好吧，我认为我要做的就是为每个知道如何返回包含该区域显着控件值的对象的包含页面添加一个函数，并命名它根据地区名称或其他内容确保唯一性。类似的东西：

在Include-page-1

中

<div class="saveRegion" saveFunc="saveNameAddressRegion()">
    <input id="val1" ..../>
    <input id="val2" ..../>
    <input..../>
</div>

<script>
function saveNameAddressRegion(){
    // stupid-simple example
    return { val1: $("#val1").val(), val2 : $("#val2").val() };
}
</script>

或者在Jade / Pug模板中：

.saveRegion(saveFunc="saveNameAddressRegion()")
    input#val1(type="text")
    input#val2(type="text")
    input#val3(type="text")

script.
    function saveNameAddressRegion(){
        // stupid-simple example
        return { val1: $("#val1").val(), val2 : $("#val2").val() };
    }

然后在Include-page-2

中

<div class="saveRegion" saveFunc="doItAgain()">
    <select id="selEyeColor">
        <option value="blue">Blue</option>
        <option value="green">Green</option>
        <option value="brown">Brown</option>
    </select>
</div>

<script>
function doItAgain(){
    return { eyeColor : $("#selEyeColor option:selected").val() };
}
</script>

然后封闭/父页面可以执行以下操作：

include ./Include-Page-1.pug
include ./Include-Page-2.pug

script.
$.each(".saveRegion", function( idx, ele ){
    var vals = [];
    vals.push( eval( $(ele).attr("saveFunc") ) );
    // process them or whatever here.
});

这让我得到一个点，其中每个Include文件都有一种返回其值的方式，这些值可能会或可能不会出现在某些复杂的屏幕表单，控件布局等中。父页面总是可以指望一个简化的对象值，不知道任何关于每个包含页面布局，设计，内容等的内容。

（（耸肩））

将新功能绑定到页面上的各种元素

3 个答案: