关于原生js添加class名.和jquery
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{margin: 0;padding: 0;}ul{margin-top: 200px;overflow: hidden;}li{list-style: none;float: left;width: 20px;height: 20px;border:1px solid #000;}.check{border:1px solid red;}</style>
</head>
<body>
<ul id="js"><li class="demo1">1</li><li class="demo1">2</li><li class="demo1">3</li><li class="demo1">4</li>
</ul>
<ul id="js1"><li class="demo2">h</li><li class="demo2">q</li><li class="demo2">b</li><li class="demo2">v</li>
</ul></body>
<script src="jquery-1.12.2.min.js"></script>
<script>
// 原生js方法
// js添加claa名，删除class名方法function hasClass(obj, cls) {return obj.className.match(new RegExp('(\s|^)' + cls + '(\s|$)'));}function addClass(obj, cls) {if (!this.hasClass(obj, cls)) obj.className += " " + cls;}function removeClass(obj, cls) {if (hasClass(obj, cls)) {var reg = new RegExp('(\s|^)' + cls + '(\s|$)');obj.className = place(reg, ' ');}}var li1Ele = ElementsByClassName("demo1");var li2Ele = ElementsByClassName("demo2");var change=function (obj) {for(var i = 0; i < obj.length; i++){obj[i].onclick = function() {for(var i = 0; i < obj.length; i++){removeClass(obj[i],"check")}addClass(this,"check");};}};change(li1Ele);change(li2Ele);// jquery方法
// var li1ele=$(".demo1");
// var li2ele=$(".demo2");
// var changeJ=function (obj) {
// for(var i = 0; i < obj.length; i++){
// obj[i].onclick = function() {
// for(var i = 0; i < obj.length; i++){
// $(obj).eq(i).removeClass("check")
// }
// $(this).addClass("check")
//
// };
// }
//};
//changeJ(li1ele);
//changeJ(li2ele);
</script>
</html>
转载于:.html
本文发布于:2024-02-02 18:10:45，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170686927945537.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
