javascript - JQuery:如何将字符串附加到函数中，以便它只对特定的 div id 起作用？

Question

根据下面的函数，如果我有多个表:listbox1、listbox2、listbox3、listbox4 等以及相应的 2 个表的多个按钮:btnAdd1、btnAdd2、btnRemove1、btnRemove2 等。如何使这个足够动态，而我不需要硬编码和创建多个函数？如何将字符串连接到 div id？

    $(document).ready(function() {
    $('#btnAdd1').click(function(e) {
        $('#listBox1 > option:selected').appendTo('#listBox2');
        e.preventDefault();
    });
    $('#btnAddAll1').click(function(e) {
        $('#listBox1 > option').appendTo('#listBox2');
        e.preventDefault();
    });
    $('#btnRemove1').click(function(e) {
        $('#listBox2 > option:selected').appendTo('#listBox1');
        e.preventDefault();
    });
    $('#btnRemoveAll1').click(function(e) {
        $('#listBox2 > option').appendTo('#listBox1');
        e.preventDefault();
    });
});

Answer 1

我继续对您想要实现的目标做出了假设。我认为您正在尝试拥有两个在它们之间移动选项的列表。此代码笔使用 CSS 类以及 HTML5 数据属性将按钮分配到适当的列表。因此，按钮可以告诉代码它们想要做什么，而不是告诉按钮要做什么。看看这个代码笔，让我知道这是否是您想要做的？

http://codepen.io/ozrevulsion/pen/xwmZXJ

HTML

<div class="content">
  <div class="col">
    <select size="15" class="from list">
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
      <option>Option 4</option>
      <option>Option 5</option>
      <option>Option 6</option>
    </select>
  </div>

  <div class="col">
    <button class="move" data-from=".from" data-to=".to">Add</button>
    <button class="moveall" data-from=".from" data-to=".to">Add All</button>
    <button class="move" data-from=".to" data-to=".from">Remove</button>
    <button class="moveall" data-from=".to" data-to=".from">Remove All</button>
  </div>

  <div class="col">
    <select size="15"  class="to list">
    </select>
  </div>
</div>

CSS

.col {
  float: left;
  margin-right: 10px;
}

.list {
  width: 200px;
  height: 300px;
}

.move, .moveall {
  display: block;
  margin-bottom: 5px;
  width: 70px;
}

Javascript

$(document).ready(function () {
    $('.move').click(function() {
      var from = $(this).attr('data-from');
      var to = $(this).attr('data-to');

      $(from + ' > option:selected').appendTo(to);
      $(from + ' > option:selected').remove();
    });

    $('.moveall').click(function() {
      var from = $(this).attr('data-from');
      var to = $(this).attr('data-to');

      $(from + ' > option').appendTo(to);
      $(from + ' > option').remove();
    });
});