Javascript 仅在具有相同类的一个li上预览文本

我有一个

，当我在输入框中键入文本时，文本将在列表中预览。我还有一个按钮，可以将更多的

添加到
中。我想要它，这样当我在文本框中键入文本时，可以在该文本框上预览文本

我的代码：

<ul class="nav nav-list nav-stacked" id="courseNav">
    <li class="title">
        <a href="#">Overview</a>
    </li>
    <li class="topics" style="margin-top: -12px">
        <a href="#">Topic</a>
    </li>
    <li class="topics">
        <a href="#">Topic</a>
    </li>
    <li class="topics">
        <a href="#">Topic</a>
    </li>
</ul>

问题在于，文本在所有
类的
主题上预览。我怎样才能解决这个问题？我可以将
id
s分配给
s，但是按钮添加的那些呢

检查一下。单击可以保存当前节点，并且
keyup
绑定必须在
click
处理程序之外

input.keyup(function (e){
   ...    
}

$('.topics').click(function(){
    preview = $(this).find('a');
    ...
}

请修好你的小提琴，它不管用谢谢，但是如果我想让每个li的主题标题输入框都不一样呢。再次感谢你的帮助！！如果我理解正确的话，您希望这样做，以实现每次单击都可以从
li
获取值，并设置为
input
，这正是我想要的。还有一件事。我有一个按钮，可以将lis添加到我的导航列表中。这种方法也适用吗？是的。只需使用
$（文档）。在（'click'，'.topics'，function（）{}
而不是
$（'.topics'）。单击（function（）{}
好的。最后一件事。当我单击我的li时，为什么文本框上会出现文本“topic”，我如何删除它？
var input = $('#editorText'),
    preview = $('.topics a');

    input.keyup(function (e) {
        preview.html(input.val());
        preview.css('padding-top', '10px');
        preview.css('padding-bottom', '10px');
        preview.css('padding-right', '15px');
        preview.css('padding-left', '15px');
        preview.css('word-wrap', 'break-word');
    });

input.keyup(function (e){
   ...    
}

$('.topics').click(function(){
    preview = $(this).find('a');
    ...
}