javascript - 更改列表中项目的 div onClick 中的文本

Question

这应该很简单。基本上，当单击列表中的项目时，文本将插入/替换到目标 div 中。'replaceWith' 可能不适合使用，因为它会删除原始数据。另外，如何将“选定”类添加到目标 div 中的文本中。

无论如何，这是我到目前为止所拥有的：http: //jsfiddle.net/BM8Cb/

HTML

<div class="selected" id="here">
   <li>All</li>
</div> 
<hr>
<ul>
  <li>All</li>
  <li>Category 1</li>
  <li>Category 2</li>
  <li>Category 3</li>
</ul>

CSS

ul {list-style:none;padding:0; margin:0;}
li {cursor:pointer;}
li:hover {color:red;}
.selected {color:red;}

JS

$("li").click(function() {
  $("#here").replaceWith(this);

});

感谢您的任何帮助

Answer 1

关于什么

$("li.item").click(function() {
    $("#here").html($(this).html());
});  

如果您只需要文本。

Answer 2

将您的 JS 更改为：

$("li.item").click(function() {
    var item = $(this).clone();
    item.attr("class","selected");
    $(".selected").append(item)    
    $(this).hide();
});

这是小提琴：http: //jsfiddle.net/J7JST/2/

这也会将选定的类添加到您的项目中

Answer 3

使用 replaceWith 将替换 DOM 节点，因此下次尝试时它不再存在。您需要使用附加

$("#here").append(this);

并且通过使用“this”，您将复制包括事件处理程序在内的所有内容。如果你只想要文本，你可以做类似的事情

$("#here").append(this.innerHTML);