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

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

remove()

$(".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();
  }
});

Answer 2

只需尝试以下更简单的方法：

$(".list-select li").on("click", function() {
  $(this).toggleClass("selected");
  
  $(".list-show").html($(".list-select li.selected").clone());
});

Answer 3

代替替换show列表的html，您可以附加单击的元素。

例如：

$( ".list-select li" ).on( "click", function() {
	$( ".list-show" ).append( this )
});

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

如果要保留原始列表，可以这样做：

$( ".list-select li" ).on( "click", function() {
   var clone = this.cloneNode(true);
	$( ".list-show" ).append( clone )
});

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

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

3 个答案: