Question

我正在使用Intranet网络表单。该表单允许用户创建＆＃34;幻灯片＆＃34; （包含输入字段的div字段 - 下拉列表，文本框和按钮）。用户可以动态选择添加任意数量的幻灯片。用户还可以更改幻灯片＆＃34;键入＆＃34; （下拉，隐藏一些输入字段）。

我添加div字段的方法是调用一个函数（位于不同的文件中）。该功能只是为幻灯片添加每个字段的唯一ID /名称。我也使用jQuery UI来使这些幻灯片可以排序。一切正常，除非我需要更新某些输入值（或隐藏输入字段）。

我需要解决两件事：

在对幻灯片进行排序/重新排序时更新输入字段。
隐藏某些元素，具体取决于＆＃34;类型＆＃34;下拉

我知道我可以使用

来做到这一点

$('.type').change(function () { // hide elements });
$( "#main" ).sortable({ update: function() { // update elements}});

但似乎jQuery不允许我们在追加后轻松访问字段。

我在线搜索了可能的解决方案（使用＆＃34;点击＆＃34;事件），但无法正常工作。我希望有人能指出我正确的方向。

感谢。

Answer 1

试试这个（更新）

    function sortInput(el, type, action, val) {
      /* `el` : all `input` elements, or, `el#id`, `el.class`, `el[attr]` as `jquery` `object` */
      var inputs = $(el);
      /* `type` of `$(el)`, i.e.g., `text`, `submit`, `hidden`, etc.  */
      var type = (type || undefined); 
      /* if no `newVal` prodided, return `$(this).val() as `default`  */
      var val = val || $(this).val();
      /* `action` to call for `$(el)`, `hide` calls jsquery `.hide()`, `val` calls jquery `.val()` with provided `val` parameter */
      $.fn.actions = (action === "hide"
             ? function() {return this.hide()} 
             : (action === "val" ? function() {return this.val(val)} : null)
             ); 
      /* jquery `.filter()` `$(el)`'s by provided `type` */
      return $(inputs).filter(function() {
      /* `return` `$(el)`, `filter()`'ed by `type`, call `$.fn.actions()` provided with `action` parameter  */
        return $(this).attr("type") === type}).actions()
    };
    /* call `sortInput()`, `.filter()` `type` `submit`, call jquery `.hide()` */
    sortInput("input", "submit", "hide");
    /* call `sortInput()`, `.filter()` `type` `text`, call jquery `.val()`, with `val` ("newVal") provided parameter */
    sortInput("input", "text", "val", "newVal");

试试这个（未经测试的）

$(".type").on("change", "input", function (e) {
  console.log(e.target); return sortInput("input", "submit", "hide"); 
});

希望这有帮助

追加后更新输入字段

1 个答案: