Jquery排他思想实现

最新推荐文章于 2022-11-18 23:35:14 发布

申申あ

最新推荐文章于 2022-11-18 23:35:14 发布

阅读量531

点赞数

分类专栏： Jquery 文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/qq_43781887/article/details/125360017

版权

本文介绍了如何利用JavaScript和Jquery实现排他思想。在JavaScript中，需要通过循环判断来实现点击按钮后，选中按钮变为粉红色，其他按钮变为白色。而在Jquery中，由于其隐式循环特性，可以简化这一过程，避免了循环注册事件。

摘要由CSDN通过智能技术生成

我们先来温习一下js里面的排他思想的写法，给五个按钮，点击某一个按钮这个按钮就变成粉红色，其余按钮都是白色，若采用js实现这个案例需要采用循环判断来写，代码如下：

<!-- jquery排他思想 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>点击</button>
    <button>点击</button>
    <button>点击</button>
    <button>点击</button>
    <button>点击</button>
    <script>
        var btn = document.querySelectorAll('button');
        for (var i = 0; i < btn.length; i++) {
            btn[i].addEventListener('click', function() {
                // 干掉所有人