使用 (this) 和 next() 修改函数，因此可以与多组元素一起使用

Posted 2023-05-09

【中文标题】使用 (this) 和 next() 修改函数，因此可以与多组元素一起使用

【英文标题】：Modify function using (this) and next() so can be used with many sets of elements

【发布时间】：2013-03-16 20:46:41

【问题描述】：

下面的函数使用jQuery UI MultiSelect Widget动态地将内容添加到多选元素（在此示例中，文本输入到#newItem并添加到#example1，并基于此'Refresh' demo。

我在 100 多个元素上使用它，因此想修改函数，以便不需要为每个元素指定选择器。我过去使用过(this) 和next()，但是这个函数比我以前使用的函数要复杂一些，我不知道如何修改它以便使用相同的选择器整个表格。

我在此处发布了该函数的工作示例：http://jsfiddle.net/chayacooper/ezxSF/24/

JS

$(function () 
    var el = $("#example1").multiselect(),
    selected = $('#selected'),
    newItem = $('#newItem');
    $("#add").click(function () 
        var v = newItem.val(), opt = $('<option />', 
            value: v,
            text: v
        );
        if (selected.is(':checked')) 
            opt.attr('selected', 'selected');
        
        opt.appendTo(el);
        el.multiselect('refresh');
    );
);

html

<div>
    <input type="text" id="newItem" />
    <input type="button" id="add" value="Add" />    
    <label><input type="checkbox" id="selected" />Selected?</label>
    <select id="example1" name="example-refresh" class="multiselect" multiple="multiple">
    <option value="foo">foo</option>
    <option value="bar">bar</option>
    </select>    
</div>

【参考方案1】：

改变这个：

<input type="button" id="add" value="Add" />

到一个班级，所以我们有一个共同的起点

<input type="button" class="add" value="Add" />

然后做：

$(function () 
    $(".add").click(function () 
      var el       = $(this).siblings('select').multiselect(),
          selected = $(this).siblings('label').find('input[type="checkbox"]'),
          newItem  = $(this).prev('input'),
          v        = newItem.val(), 
          opt      = $('<option />',  value: v, text : v );

      if (selected.is(':checked')) 
          opt.prop('selected', true);
      
      opt.appendTo(el);
      el.multiselect('refresh');
    );
);

【讨论】：

我只需要按类分别调用多选小部件，然后它就像做梦一样工作：-) 一个问题 - 因为这些不会是 或 ，有没有其他方法可以打电话给他们？每行有 3 - 4 个元素，如果可能的话，我希望将文本框放在下一行。 @ChayaCooper - 不知道我明白了，siblings('select') 只得到选择标签的兄弟姐妹，比如<select>，而且只有其中一个？在定位此类内容时，您始终可以使用类。我的错误 - 我以为它指的是同一级别的其他元素 :-) 那么我如何指定哪些输入元素配对在一起（以便文本框更新正确的 元素)?不确定我是否明白这个问题。如果标记与问题中的内容一样，包含在容器 div 元素中，则没有问题，否则您将不得不将其包装在容器元素中。以FIDDLE 为例。由于我的大部分元素都在表格中，我需要稍微修改一下函数，这样每个集合就不需要包装在它自己的容器元素中。我想使用此处显示的方法（这需要我设置第二个元素的名称以匹配所选第一个元素的 id），但我不确定如何将其集成到此函数中***.com/a/15654878/1056713跨度>