javascript - 自定义设置 moveAll/removeAll 图标

Question

我正在使用 Bootstrap Dual Listbox 插件与 Font Awesome 4.7.0 .

我想使用单个 '»' 和 自定义 "Move all" 和 "Remove all" 按钮图标'«'。但是，这些按钮图标对我来说呈现不正确。

var dualListContainer = $('[name=duallistbox_demo1]').bootstrapDualListbox({

  // default text
  moveAllLabel: 'Move all',
  removeAllLabel: 'Remove all',
});


$(function() {
  var customSettings = $('select[name="duallistbox_demo1"]').bootstrapDualListbox('getContainer');
  customSettings.find('.moveall i').removeClass().addClass('fa fa-angle-double-right');
  customSettings.find('.removeall i').removeClass().addClass('fa fa-angle-double-left');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap-duallistbox@3.0.6/dist/bootstrap-duallistbox.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap-duallistbox@3.0.6/dist/jquery.bootstrap-duallistbox.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-sm-12">
    <select multiple="multiple" size="10" name="duallistbox_demo1">
      <option value="option1">Option 1</option>
      <option value="option2">Option 2</option>
      <option value="option3" selected="selected">Option 3</option>
      <option value="option4">Option 4</option>
      <option value="option5">Option 5</option>
      <option value="option6" selected="selected">Option 6</option>
      <option value="option7">Option 7</option>
      <option value="option8">Option 8</option>
      <option value="option9">Option 9</option>
      <option value="option0">Option 10</option>
    </select>
  </div>
</div>

我在创建 bootstrapDualListBox 的下方添加了这个 jQuery:

$(function() {
  var customSettings = $('select[name="duallistbox_demo1"]').bootstrapDualListbox('getContainer');
  customSettings.find('.moveall i').removeClass().addClass('fa fa-angle-double-right');
  customSettings.find('.removeall i').removeClass().addClass('fa fa-angle-double-left');
});

这可以修复吗？谢谢。

Answer 1

如果我没理解错的话，问题是按钮上添加了两个图标，而您只希望显示一个。为此，您可以在添加新类后添加 .next().remove() 来简单地删除辅助图标。

这可以从以下方面看出:

var dualListContainer = $('[name=duallistbox_demo1]').bootstrapDualListbox({

  // default text
  moveAllLabel: 'Move all',
  removeAllLabel: 'Remove all',
});

$(function() {
  var customSettings = $('select[name="duallistbox_demo1"]').bootstrapDualListbox('getContainer');
  customSettings.find('.moveall i').removeClass().addClass('fa fa-angle-double-right').next().remove();
  customSettings.find('.removeall i').removeClass().addClass('fa fa-angle-double-left').next().remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap-duallistbox@3.0.6/dist/bootstrap-duallistbox.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap-duallistbox@3.0.6/dist/jquery.bootstrap-duallistbox.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-sm-12">
    <select multiple="multiple" size="10" name="duallistbox_demo1">
      <option value="option1">Option 1</option>
      <option value="option2">Option 2</option>
      <option value="option3" selected="selected">Option 3</option>
      <option value="option4">Option 4</option>
      <option value="option5">Option 5</option>
      <option value="option6" selected="selected">Option 6</option>
      <option value="option7">Option 7</option>
      <option value="option8">Option 8</option>
      <option value="option9">Option 9</option>
      <option value="option0">Option 10</option>
    </select>
  </div>
</div>