论坛 › 问答互助 › 哥哥们，如何简化这部分代码？

Su. 发表于 2022-6-23 18:32:02

哥哥们，如何简化这部分代码？

!(data/attachment/forum/202206/23/183137fkipg0sli1ssltl2.png)
这一大嘟噜整上去，真心难受，有没有什么办法简化呢？这大部分都是一样的，特别是这几个style，一毛一样，怎么把他们变好看呢？谢谢哥哥们了

Su. 发表于 2022-6-23 18:34:34

这图片我都删了咋还在{:4_88:}

Ne-21 发表于 2022-6-23 18:47:25

循环？？？？

wwwwwllllk 发表于 2022-6-23 18:54:51

用for循环不就好了，那么有规律

Su. 发表于 2022-6-23 18:59:19

wwwwwllllk 发表于 2022-6-23 18:54
用for循环不就好了，那么有规律

哦哦是这样的，我见这个菜鸟教程里这样写挺方便的，但是我不会在脚本里这样写
!(data/attachment/forum/202206/23/185914ivqr3logclhgvrle.png)

李恒道 发表于 2022-6-23 19:31:48

按钮部分可以封装成函数
传入name和函数
返回dom

Su. 发表于 2022-6-23 19:34:31

李恒道 发表于 2022-6-23 19:31
按钮部分可以封装成函数
传入name和函数
返回dom

好滴，我去搞了，谢谢哥哥

steven026 发表于 2022-6-23 21:08:05

本帖最后由 steven026 于 2022-6-23 21:10 编辑

> 本帖最后由 steven026 于 2022-6-23 21:10 编辑

如果只是要求尽可能简洁、优雅，可以试试jQuery
你上面的代码可以简化成这样（为了优雅用了eval 不能在'use strict';模式下使用）

```
let cssText="height:30px;width:50px;border:1" //此处省略后续style
let innerHTML=["A","B","C","D","E"]

$("body").append(table) //假设只有一个<table>,table=<table></table>

for(let i=1;i<=5;i++){
    $(`<button id="btn${i}" style=${cssText}>${innerHTML}</button>`).appendTo($("table")).on("click",eval("main"+i))
}
```

wwwwwllllk 发表于 2022-6-23 21:48:39

steven026 发表于 2022-6-23 21:08
> 本帖最后由 steven026 于 2022-6-23 21:10 编辑

如果只是要求尽可能简洁、优雅，可以试试jQuery


哥哥写的真优雅

Su. 发表于 2022-6-23 21:50:11

steven026 发表于 2022-6-23 21:08
> 本帖最后由 steven026 于 2022-6-23 21:10 编辑

如果只是要求尽可能简洁、优雅，可以试试jQuery


呜呜呜，太牛了！！！ggnb！！！！！！！

查看完整版本: 哥哥们，如何简化这部分代码？