怎样用jQuery实现排他思想
在这里我们只需要用到jQuery里面的sibling()即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../jquery-3.5.1.js"></script>
</head>
<body>
<button>提交</button>
<button>提交</button>
<button>提交</button>
<button>提交</button>
<button>提交</button>
<button>提交</button>
<button>提交</button>
<button>提交</button>
<script>
$(function () {
// 1. 隐式迭代
$("button").click(function(){
// 2. 当前的元素变化背景颜色
$(this).css("background","pink");
// 3. 其余的兄弟去掉背景颜色
$(this).siblings("button").css("background","")
})
})
</script>
</body>
</html>
当点击其中一个按钮的时候,这个按钮会变色,而它的兄弟们都不会变色,换一个按钮亦是如此,这就实现了排他思想。