如何使用 JQuery 在列表中添加元素
[英]How to Add element in a list with JQuery
问题描述
我刚开始使用 jQuery，当我点击一个按钮时，我想在我的 HTML 中添加li元素。 然后我想添加一个按钮，当它被点击时清除我的列表。 这部分工作正常，但是当我单击清除按钮时，它禁用了其他按钮。
我的 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>
我的 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('');
}
我不明白问题出在哪里以及如何解决。
2 个解决方案
解决方案1
4 2019-11-12 08:58:54
你必须清除#liste ul而不是#liste 。 当你清空你的#liste时，它会删除你的 appendTo 目标<ul></ul>标签。 在该操作之后，您再次尝试在<ul></ul>标记中追加到，但它已被删除。 所以你必须清理内部#liste ul
您的声明removeFilters()并且您的按钮 function名称将相同因为您的按钮正在调用以相同名称声明的 function 。
您可以在 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>
解决方案2
1 已采纳 2019-11-12 07:26:35
有两个问题，首先你有一个类型错误，你正在使用removeFiltres()和removeFilters() 。
其次将ul添加到$("#liste").html(''); 它看起来像$("#liste ul").html(''); 然后它工作。
您可以使用以下方法使您的代码更干净：
$('[id^=filtre]').click(function(){
$("<li>Filter"+$(this).data('id')+"</li>").appendTo("ul");
});
演示
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>
解决方案3
1 2019-11-12 07:27:25
1.由于您使用的是 jQuery 然后使用class ， data-id概念来清理/减少您的代码
2. removeFiltres()和removeFilters()的拼写差异。
3. $("#liste").html(''); 需要是$("#liste ul").html('');
工作片段： -
$('.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>
如何删除元素列表中的类并添加到另一个元素Jquery？
[英]How to remove a class in a list of elements and add to another element Jquery?
如何在单击的其他元素具有特定值的数据归类的其他元素之后的列表中添加元素？ 用jQuery
[英]How to add element in the list after other element that clicked and have data atribute with specific value? with jquery
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.