javascript - 单击项目列表然后显示到另一个列表

Question

我试图通过单击将项目列表显示到另一个列表。所选项目正在显示，但仅显示在一行中。我尝试添加分隔线，但没有成功。

我需要从列表选择中保留项目。这就像展示我选择的东西。真实场景是选择多个产品，然后显示选择的产品名称

如果客户取消选择项目，它需要不断更新列表显示的项目。

$(".list-select li").on("click", function() {
  $(this).toggleClass("selected");
  if ($(this).hasClass("selected")) {
    $(".list-show li").html($(".selected span").text() + "<br />");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list-select">
  <li> <span>item 1</span> </li>
  <li> <span>item 2</span> </li>
  <li> <span>item 3</span> </li>
</ul>

<ul class="list-show">
  <li> </li>
</ul>

Answer 1

您可以通过 clone() 和 append() jQuery 方法添加(实际上是克隆然后将新元素附加到另一个地方)。将元素添加到下一个列表是必要的。要从第二个列表中删除它们(让我们想象一下，它应该通过单击第一个列表中的项目来工作)，您可以使用 li:contains(SPECIFIC_CONTENT_TO_MATCH) 选择元素，然后只需 删除()它:

$(".list-select li").on("click", function() {
  $(this).toggleClass("selected");
  if ($(this).hasClass("selected")) {
    $(".list-show").append($(this).clone());
  } else {
    $(`.list-show li:contains('${$(this).text()}')`).remove();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Select:
<ul class="list-select">
  <li> <span>item 1</span> </li>
  <li> <span>item 2</span> </li>
  <li> <span>item 3</span> </li>
</ul>

Show:
<ul class="list-show"></ul>