Question

根据下面的功能，如果我有多个表：listbox1，listbox2，listbox3，listbox4等以及多个按钮：btnAdd1，btnAdd2，btnRemove1，btnRemove2等对应的2个表。如何在不需要硬编码和创建多个功能的地方充分利用这种动态？如何将字符串连接到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

您可以通过执行$('#div_' + myString)

将字符串连接到jquery选择器

Answer 2

我继续前进并假设你想要实现的目标。我想你正试图让两个列表在它们之间移动选项。此代码笔使用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();
    });
});

JQuery：如何将一个字符串附加到函数中，以便它只对特定的div id执行操作？

2 个答案: