实现多按钮ABCD四个选项的转换

LHTY15091813836

于 2023-02-16 19:28:28 发布

阅读量222

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/LHTY15091813836/article/details/129068563

版权

以4个按钮为例

样式

<body>
    <button>
        A
    </button>
    <button>
        A
    </button>
    <button>
        A
    </button>
    <button>
        A
    </button>

JavaScript部分

<script>
        var btn=document.getElementsByTagName('button');
        var arr=['A','B','C','D'];
        for(var i=0;i<btn.length;i++){
            btn[i].index=i;//log===this.index
            btn[i].j=0;//给btn标签加了一个自定义属性
            btn[i].onclick=function(){
                this.j++;//点击一下加一
                if(this.j==arr.length){//判断 当j为4的时候
                    this.j=0;//arr的下标为0
                }
                console.log(this);//<button>D</button>按钮
                console.log(this.j);//arr的下标
                this.innerHTML=arr[this.j]
            //   this 指的是当前点击的btn按钮
            //   this.innerHTML  指的是当前按钮的内容
            //   arr=['A','B','C','D']
            //   this.j 是btn的自定义属性同时又是arr的下标
            }
 }

上面标注了部分实现意义，如果在看的你还不能完全明白的话，可以给我发消息呦！

如果可以点赞关注就更好了＜（＾－＾）＞

-----------南乔