Question

我正在尝试将数据追加到表中，并且必须进行切换。选中后，每个开关都会附加不同的文本。

当我检查它们两者时，它们之间会紧跟一个空格，但是没有什么可分开的，所以我在附件中添加了一个“，”以将它们很好地分开。

唯一的问题是，如果仅选中其中之一，则会在其中添加文本，并在其旁边加上逗号，并且再也没有文本，因此看起来有点奇怪。

这是JS附加代码：

add

我想添加一些内容，例如仅选中其中一个而不添加“，”。

我也想在颜色输入中添加相同的内容。例如，如果颜色输入为空，则不添加“，”。

感谢您的帮助，谢谢<3。

Answer 1

您可以构建数组，过滤出空项目，然后将其余元素用逗号连接，而不是线性地构建字符串。

$('#add-item').on('click', function() {
  const itemData = [$('#item-input').val(), $('#color-input').val()]
    .filter(x => x != '')
    .join(', ');
    
    sizeData =  $('#sizes-item').val();

    checkboxData = [$('#any-color').is(':checked') ? 'Any Color' : '', $('#any-size').is(':checked') ? 'Any Size' : '']
    .filter(x => x != '')
    .join(', ');
  
  $('#items-table').append('<tr>'
        +'<td>'+itemData+'</td>'
        +'<td>'+sizeData+'</td>'
        +'<td>'+checkboxData+'</td>'
        +'<td><button class="remove-btn"><div class="thex">X</div></button><td>'
        +'</tr>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="item-input">
<input id="color-input">
<input id="sizes-item">
<input id="any-color" type="checkbox">
<input id="any-size" type="checkbox">
<button id="add-item">Add Item</button>

<table id="items-table"></table>

Answer 2

使用.filter和.join会有所帮助。下面是一个有效的代码

$('#trigger').click(function() {

  var item_text = $('#item-input').val();
  var item_color = $('#color-input').val();
  var size_text = $('#sizes-item').val();
  var any_color = $('#any-color').is(':checked') ? 'Any Color' : '';
  var any_size = $('#any-size').is(':checked') ? 'Any Size' : '';

  var item = [any_color, item_color].filter(function(i) {
      return !!i;
    })
    .join(',');

  var sizeColor = [item_text, any_size].filter(function(i) {
      return !!i;
    })
    .join(',');
  $('#items-table').append('<tr>' +
    '<td>' + item + '</td>' +
    '<td>' + size_text + '</td>' +
    '<td>' + sizeColor + '</td>' +
    '<td><button class="remove-btn"><div class="thex">X</div></button><td>' +
    '</tr>');

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>


  <input type="text" id="item-input">
  <input type="text" id="color-input">
  <input type="text" id="sizes-item">
  <input type="checkbox" id="any-color">
  <input type="checkbox" id="any-size">


  <button id="trigger">Run</button>

  <table>
    <thead>
      <tr>
        <th>One</th>
        <th>Two</th>
        <th>Three</th>
        <th>Four</th>
      </tr>
    </thead>
    <tbody id="items-table">

    </tbody>
  </table>
</div>

根据检查或为空附加数据

2 个答案: