有人知道为什么按钮在单击时不会对输入使用react吗?我希望单击以显示提示,然后使用提示中的文本并将其作为与其他列表项具有相同 css 的列表项追加到 hmtl 中。
$(".btn").click(function() {
var text = prompt('What do you need to do?')
var txt1 = $("<li id="
listItem "><p></p></li>").text(text);
$("#itemList").append(txt1);
});
body {
background: #bff0ff;
}
li {
display: inline-block;
float: left;
padding: 5px;
}
#list {
list-style-type: none;
}
#itemList {
list-style-type: none;
}
#listItem {
width: 250px;
height: 75px;
border-radius: 5px;
background: #5ABCB9;
}
#listItem p {
font-family: curive, sans-serif;
text-align: center;
font-size: 20px;
color: #
}
.btn {
height: 50px;
width: 50px;
border-radius: 50%;
border: 1px;
font-size: 40px;
background: #63E2C6;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<input type="button" class="btn" value="+" />
<ul id="itemList">
<li id="listItem">
<p>
Study for exams.
</p>
</li>
</ul>
最佳答案
如果您尝试向现有的 ul
添加更多 li
元素,请尝试以下操作(因为在您当前的实现中 p
元素会渲染时被忽略):
$(".btn").click(function() {
var text = prompt('What do you need to do?')
var $li = $('<li/>',{ 'class' : 'listItem' })
var $p = $('<p/>', { 'text' : text })
$($li).append($p);
$("#itemList").append($li);
});
关于javascript - 单击添加按钮绝对没有任何作用,我不知道为什么,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43668164/