将单击的项目替换为 div 主文本 (jQuery)

Question

老实说，我不太擅长jquery，所以也许我会在这里找到帮助。但是，我的代码确实有效，但只有效一次。当我尝试再次点击时 - 没有任何反应。

HTML

<li class="selected">All numbers</li>

<br/>

<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>

jQuery

$("li.item").click(function() {
  $("li.selected").replaceWith($(this).text());
});

问题：

我怎样才能让这个脚本一直工作，而不是只工作一次？正如我之前所说，我不擅长jquery，我找不到解决这个问题的正确方法。

Jsfiddle

http://jsfiddle.net/yLgx6xxo/

Answer 1

设置 text() 而不是 'replacing the div'。

你的例子没有的原因是你要替换：

 <li class="selected">All numbers</li>

和

因此，当您要替换下一个时，jquery 没有找到 "selected" div，因此没有进行替换。

通过使用 text()，您只需替换 div、

的实际 'text' 部分

所以，

 <li class="selected">All numbers</li>

变成

 <li class="selected">1</li>

DEMO

$(".item").click(function() {
  $("li.selected").text($(this).text());
});

li.selected, li.item { list-style-type: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="selected">All numbers</li>

<br/>

<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>

将单击的项目替换为 div 主文本 (jQuery)

Replace clicked item with main div text (jQuery)

html

jquery

click