我有一个 <ul>
当我在输入框中键入时,文本会在列表中预览。我还有一个按钮,我可以在其中添加更多 <li>
s 到 <ul>
.我想要它,以便当我在文本框中键入文本时,会在该文本框中预览 <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>
我的按钮代码:
$('#addCourse').click(function() {
// adds a li to the courseNav
$('#courseNav').append('<li class="newTopic" id="newLi"><a href="#">Topic</a></li>');
$('.newTopic').click(function() {
$('#courseDiv').css('display', 'none');
$('#topicDiv').css('display', 'block');
});
});
$('#delCourse').click(function() {
$('#newLi').remove();
});
我的预览代码:
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');
});
问题是在所有 <li>
上都可以预览文本与 class
“话题”。我怎样才能解决这个问题?我可以分配 id
s 到 <li>
s 但是按钮添加的那些呢?
最佳答案
检查一下 jsFiddle .单击您可以保存当前节点,并且 keyup
绑定(bind)必须在 click
处理程序之外
input.keyup(function (e){
...
}
$('.topics').click(function(){
preview = $(this).find('a');
...
}
关于javascript - 仅在一个具有相同类别的 li 上预览文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29041798/