Question

我正在尝试修剪我动态填充复选框值的段落中的最后一个字符。麻烦的是我必须修剪整个段落的尾随特征。我不想在将值添加到值列表之前将其修剪掉。

这是一个codepen：

HTML：

<dl class="dropdown"> 

<dt>
<a href="#">
  <span class="hida">▼</span>     
</a>
</dt>

<dd>
    <div class="mutliSelect">
        <ul class="ul">
            <li>
                <input type="checkbox" value="PONumber" />Number</li>
            <li>
                <input type="checkbox" value="AuthNumber" />Auth Number</li>
            <li>
                <input type="checkbox" value="StatusId" />Status</li>
            <li>
                <input type="checkbox" value="ManufacturerId" />Manufacturer</li>
        </ul>
    </div>
</dd>
</dl>
<p class="multiSel"></p>

使用Javascript：

$(".dropdown dt a").on('click', function () {
      $(".dropdown dd ul").slideToggle('fast');
  });

  $(".dropdown dd ul li a").on('click', function () {
      $(".dropdown dd ul").hide();
  });

  function getSelectedValue(id) {
       return $("#" + id).find("dt a span.value").html();
  }

  $(document).bind('click', function (e) {
      var $clicked = $(e.target);
      if (!$clicked.parents().hasClass("dropdown")) $(".dropdown dd ul").hide();
  });


  $('.mutliSelect input[type="checkbox"]').on('click', function () {

      var title = $(this).closest('.mutliSelect').find('input[type="checkbox"]').val(),
          title = $(this).val() + ",";

      if ($(this).is(':checked')) {
          var html = '<span title="' + title + '">' + title + '</span>';
          $('.multiSel').append(html);
      } 
      else {
          $('span[title="' + title + '"]').remove();
          var ret = $(".hida");
          $('.dropdown dt a').append(ret);

      }
  });

这里有一些关于修剪尾随字符的问题，但是我无法弄清楚在动态添加值之后如何修剪段落。谢谢！

Answer 1

以下代码可以满足您的需求。我将逗号移到了<span>

之外

$('p.multiSel')
    .html($(this)
        .find('input[type="checkbox"]:checked')
        .map(function(idx, elem) {
            return $(elem).parent().text().trim();
        })
        .get()
        .map(function(text) {
            return "<span title='" + text + "'>" + text + "</span>";
        })
        .join(', '));

CodePen

说明

$('p.multiSel').html(...)

（.html）设置<p class='multiSel'>。

的内容

$(this).find('input[type="checkbox"]:checked')

（.find）获取选中的复选框。

.map(...)

（.map）将选中的复选框数组映射到纯文本，并修剪空白。

.get()

（.get）将jQuery选择转换为常规数组。

.map(...)

（Array.prototype.map）通过将纯文本包装在<span>标签和内容中，将纯文本映射到您想要制作的元素。

.join(...)

（Array.prototype.join）在我们正在处理的数组的所有元素之间插入逗号和空格。

无法从动态填充的字符串中修剪尾随逗号

1 个答案:

说明