三路十八湾 2023-06-04 15:27 采纳率: 50%
浏览 130
已结题

用React或js来循环给盒子添加点击事件

要求大盒子宽800高900,大盒子中有每行80个小盒子共20列,,小盒子每个宽8.5高44.5,visibility是visible,自带边框所有盒子添加点击事件,点击任意小盒子后,从当前盒子向后数16个小盒子合并成一个中盒子背景色变成绿色,这个中盒子宽度变成121共占用16个小盒子位置,其余15个小盒子visibility变成hidden隐藏掉,再次点击这个的绿色中盒子还原为刚才的16个小盒子

img

img

img

  • 写回答

8条回答

  • Stephen_112 2023-06-05 10:38
    关注
    获得25.00元问题酬金

    看下是不是这样就符合你的要求

    <!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>
<style>
    #container {
        padding: 20px;
    }

    .main {
        border: 1px solid #ccc;
        width: 800px;
        height: 900px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .box {
        width: 8px;
        height: 44.5px;
    }

    .box-bg1 {
        border: 1px solid #aaa;
    }

    .box-bg2 {
        background-color: green;
        border: 1px solid green;
    }
</style>

<body>
    <div id="container">
        <div class="main">
            <template v-for="l in list">
                <template v-if="l.type == 1">
                    <div class="box box-bg1" @click="clc(l.no)">
                        <span></span>
                    </div>
                </template>
                <template v-if="l.type == 2">
                    <div class="box box-bg2" @click="unclc(l.start)">

                    </div>
                </template>
            </template>
        </div>
    </div>
</body>
<script src="./vue-2.6.14.min.js"></script>
<script>
    let vue = new Vue({
        el: "#container",
        data() {
            return {
                list: []
            }
        },
        created() {
            this.init();
        },
        methods: {
            init() {
                for (let i = 0; i < 1600; i++) {
                    temp = []
                    temp['no'] = i
                    temp['type'] = 1
                    temp['start'] = i
                    this.list.push(temp)
                }
            },
            clc(number) {
                for (let i = 0; i < 1600; i++) {
                    if ((this.list[i]['start'] <= number + 16 && this.list[i]['start'] > number)
                        && this.list[i]['type'] == 2) {
                        alert("不允许")
                        return
                    }
                }
                for (let i = 0; i < 1600; i++) {
                    if (i >= number && i < number + 16) {
                        this.list[i]['type'] = 2
                        this.list[i]['start'] = number
                    }
                }
                this.$forceUpdate();
            },
            unclc(number) {
                for (let i = 0; i < 1600; i++) {
                    if (this.list[i]['start'] == number) {
                        this.list[i]['type'] = 1
                        this.list[i]['start'] = i
                    }
                }
                this.$forceUpdate();
            }
        },
    });
</script>

</html>
    评论

报告相同问题？

  • JavaScript+react笔记
    2022-05-29 16:55
    mayi666777的博客 JavaScript+react笔记
  • react.js
    2024-08-29 09:37
    涔溪的博客 一、create-react-app 全局安装create-react-app $ npm install -g create-react-app 创建一个项目 $ create-react-app your-app 注意命名方式 Creating a new React app in /dir/your-app. Installing packages....
  • React与Three.js：在组件中创建3D交互体验
    2025-06-01 01:08
    AI实战架构笔记的博客 我们的目的是教会大家如何把React和Three.js结合起来，在React的组件里创建出超酷的3D交互体验。范围涵盖了从基础概念的介绍，到具体代码的实现，再到实际应用场景的探讨，让大家全面了解这个技术。我们会先介绍一些...
  • react
    2023-02-22 11:28
    成都丁海寅的博客 react学习文档，包括hook
  • React19进阶特性
    2025-05-27 23:48
    若梦plus的博客 React Hooks是React 16.8引入的特性，允许在函数组件中使用状态和生命周期功能。核心Hooks包括： useState：管理组件状态 useEffect：处理副作用操作 useContext：访问上下文数据 React Suspense用于处理异步操作，...
  • react入门总结
    2024-01-25 16:42
    plc_2333333的博客 从0学习react框架，以下就是我学习的心得，通过笔记的方式记录学习的内容。内容会根据每次学习的情况进行更改，直至学完为止
  • React前端面试题
    2023-05-11 11:57
    北北滴王的博客 总的来说，React中的setState方法是用于更新组件状态的方法，它可以接收一个对象或一个函数作为参数，用于更新组件的状态。具体的实现就是在客户端创建一个script标签，然后把请求后端的接口拼接一个回调函数名称...
  • 【前端】【React】【数字孪生】全解react使用threejs，@react-three/fiber，@react-three/drei
    2025-07-03 13:53
    患得患失949的博客 @react-three/fiber 是一个用于 React 的 3D 渲染库，它将 React 的声明式编程风格引入到 Three.js 中，开发者可以使用 JSX 语法来创建和组合 3D 组件，而不是像传统的 Three.js 那样使用命令式的代码来操作对象。...
  • React 内 JSX了解及使用
    2023-05-16 17:14
    DOM曼珠沙华的博客 Jsx的全称是Javascript XML，react定义的一种类似XML的JS拓展语法：JS+XML，使我们可以用类似于xml方式描述视图。 本质是React.createElement(component, props, ...children) 的语法糖 原理：babel-loader会预...
  • React
    2021-09-14 23:18
    iku_ki的博客 JSX是什么 JSX是一种像下面这样的语法：类似的在js中嵌入html的代码 1. const element = <h1>Hello, world!</h1>... 它是一种JavaScript语法扩展，在React中可以方便地用来描述UI。 本质
  • 没有解决我的问题, 去提问

问题事件

  • 系统已结题 6月12日
  • 赞助了问题酬金50元 6月4日
  • 创建了问题 6月4日