[英]How to Add element in a list with JQuery
I just started using jQuery and I wanted to add li element in my HTML when I click on a button.我刚开始使用 jQuery,当我点击一个按钮时,我想在我的 HTML 中添加li元素。 Then I want to add a button that clear my list when it's clicked.
然后我想添加一个按钮,当它被点击时清除我的列表。 This part works fine but when I click on clear button it disabled the other buttons.
这部分工作正常,但是当我单击清除按钮时,它禁用了其他按钮。
My html:我的 html:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="shortcut icon" href="res/MPS.png" type="image/x-icon"/>
<link rel="icon" href="res/MPS.png" type="image/x-icon"/>
<title>Historique</title>
</head>
<body>
<div class="filtres">
<input id="filtre1" type="button" value="filter 1" onclick="addFiltre1()">
<input id="filtre2" type="button" value="filter 2" onclick="addFiltre2()">
<input id="filtre3" type="button" value="filter 3" onclick="addFiltre3()">
<input id="filtre4" type="button" value="filter 4" onclick="addFiltre4()">
<input id="filtre5" type="button" value="filter 5" onclick="addFiltre5()">
<input id="clear" type="button" value="Clear filters" onclick="removeFilters()">
</div>
<div id="liste">
<ul>
</ul>
</div>
</body>
</html>
My JS:我的 JS:
function addFiltre1() {
$("<ul>");
$("<li>Filter 1</li>").appendTo("ul");
}
function addFiltre2() {
$("<ul>");
$("<li>Filter 2</li>").appendTo("ul");
}
function addFiltre3() {
$("<ul>");
$("<li>Filter 3</li>").appendTo("ul");
}
function addFiltre4() {
$("<ul>");
$("<li>Filter 4</li>").appendTo("ul");
}
function addFiltre5() {
$("<ul>");
$("<li>Filter 5</li>").appendTo("ul");
}
function removeFiltres() {
$("#liste").html('');
}
I don't understand where is the problem and how to fix it.我不明白问题出在哪里以及如何解决。
you have to clear #liste ul not #liste .你必须清除#liste ul而不是#liste 。 when you are making empty your #liste it's removing your appendTo target
<ul></ul>
tag.当你清空你的#liste时,它会删除你的 appendTo 目标
<ul></ul>
标签。 After that action Again you are trying to appendTo in <ul></ul>
Tag but its already removed.在该操作之后,您再次尝试在
<ul></ul>
标记中追加到,但它已被删除。 so you have to clean inner #liste ul所以你必须清理内部#liste ul
your declaration removeFilters() and you button function name will be same Because your button is calling that function that is declared with same name.您的声明removeFilters()并且您的按钮 function名称将相同因为您的按钮正在调用以相同名称声明的 function 。
you can use direct empty() method for clear inner HTML at your div instance of html('') method.您可以在 html('') 方法的 div 实例中使用直接empty()方法清除内部 HTML。
function addFiltre1() { $("<ul>"); $("<li>Filter 1</li>").appendTo("ul"); } function addFiltre2() { $("<ul>"); $("<li>Filter 2</li>").appendTo("ul"); } function addFiltre3() { $("<ul>"); $("<li>Filter 3</li>").appendTo("ul"); } function addFiltre4() { $("<ul>"); $("<li>Filter 4</li>").appendTo("ul"); } function addFiltre5() { $("<ul>"); $("<li>Filter 5</li>").appendTo("ul"); } function removeFiltres() { $("#liste ul").empty(''); }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="filtres"> <input id="filtre1" type="button" value="filter 1" onclick="addFiltre1()"> <input id="filtre2" type="button" value="filter 2" onclick="addFiltre2()"> <input id="filtre3" type="button" value="filter 3" onclick="addFiltre3()"> <input id="filtre4" type="button" value="filter 4" onclick="addFiltre4()"> <input id="filtre5" type="button" value="filter 5" onclick="addFiltre5()"> <input id="clear" type="button" value="Clear filters" onclick="removeFiltres()"> </div> <div id="liste"> <ul> </ul> </div>
There are 2 problems, first you have a type error, you are using removeFiltres()
and removeFilters()
.有两个问题,首先你有一个类型错误,你正在使用
removeFiltres()
和removeFilters()
。
Second add ul
to $("#liste").html('');
其次将
ul
添加到$("#liste").html('');
to it looks like $("#liste ul").html('');
它看起来像
$("#liste ul").html('');
then it works.然后它工作。
You can make your code a bit more clean using:您可以使用以下方法使您的代码更干净:
$('[id^=filtre]').click(function(){
$("<li>Filter"+$(this).data('id')+"</li>").appendTo("ul");
});
Demo演示
function addFiltre1() { $("<ul>"); $("<li>Filter 1</li>").appendTo("ul"); } function addFiltre2() { $("<ul>"); $("<li>Filter 2</li>").appendTo("ul"); } function addFiltre3() { $("<ul>"); $("<li>Filter 3</li>").appendTo("ul"); } function addFiltre4() { $("<ul>"); $("<li>Filter 4</li>").appendTo("ul"); } function addFiltre5() { $("<ul>"); $("<li>Filter 5</li>").appendTo("ul"); } function removeFiltres() { $("#liste ul").html(''); }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="filtres"> <input id="filtre1" type="button" value="filter 1" onclick="addFiltre1()"> <input id="filtre2" type="button" value="filter 2" onclick="addFiltre2()"> <input id="filtre3" type="button" value="filter 3" onclick="addFiltre3()"> <input id="filtre4" type="button" value="filter 4" onclick="addFiltre4()"> <input id="filtre5" type="button" value="filter 5" onclick="addFiltre5()"> <input id="clear" type="button" value="Clear filters" onclick="removeFiltres()"> </div> <div id="liste"> <ul> </ul> </div>
1.Since you are using jQuery then use class
, data-id
concept to clean/reduce your code 1.由于您使用的是 jQuery 然后使用
class
, data-id
概念来清理/减少您的代码
2.Spelling difference in removeFiltres()
and removeFilters()
. 2.
removeFiltres()
和removeFilters()
的拼写差异。
3. $("#liste").html('');
3.
$("#liste").html('');
needs to be $("#liste ul").html('');
需要是
$("#liste ul").html('');
Working snippet:-工作片段: -
$('.addLi').click(function(){ $("<li>Filter "+$(this).data('id')+"</li>").appendTo("ul"); }); function removeFiltres() { $("#liste ul").html(''); }
<.DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/style:css"> <script src="https.//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript" src="js/index.js"></script> <link rel="shortcut icon" href="res/MPS.png" type="image/x-icon"/> <link rel="icon" href="res/MPS.png" type="image/x-icon"/> <title>Historique</title> </head> <body> <div class="filtres"> <input type="button" value="filter 1" data-id="1" class="addLi"> <input type="button" value="filter 2" data-id="2" class="addLi"> <input type="button" value="filter 3" data-id="3" class="addLi"> <input type="button" value="filter 4" data-id="4" class="addLi"> <input type="button" value="filter 5" data-id="5" class="addLi"> <input id="clear" type="button" value="Clear filters" onclick="removeFiltres()"> </div> <div id="liste"> <ul> </ul> </div> </body> </html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.