zoukankan      html  css  js  c++  java
  • 自定义属性建立匹配、对应关系——JS学习笔记2015-5-27(第40天)

    页面中经常需要建立匹配、对应关系来改变页面的显示元素;这个时候可能就需要用到自定义属性来添加索引值

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>自定义属性匹配索引值</title>
    </head>
    
    <body>
    
    <input type="button" value="btn1" />
    <input type="button" value="btn2" />
    <input type="button" value="btn3" />
    <p>a</p>
    <p>b</p>
    <p>c</p>
    
    <script type="text/javascript">
        var aBtn = document.getElementsByTagName('input');
        var arr = ['美队', '钢铁侠', '绿巨人'];
        var aP = document.getElementsByTagName('p');
         // 要想建立“匹配”、“对应”关系,就用索引值;
        for(var i=0; i<aBtn.length; i++){
    
             aBtn[i].index = i;  // 自定义属性 (索引值);
             aBtn[i].onclick = function(){
                 // this.value = arr[this.index];  //点击按钮,匹配了相应的名字
                 aP[this.index].innerHTML = arr [this.index]; //匹配了相应的P元素
             }
        }
    
    </script>
    </body>
    </html>

    思路:

    点击按钮,让下面的对应的P内容改变,

    改变为什么呢?改变为对应数组的内容;比如:第一个按钮点击后改变第一p元素的内容,这个内容来自于数组的第一个元素;

    这里的自定义值就相当于一个桥梁 联系了按钮、数组、p标签

  • 相关阅读:
    011. Python中*args, **kwargs 和 pass 和self 解释
    010. windows10下安装kivy 1.9.1版
    013. MVC5过滤器
    制作ubuntu16.04 自动安装iso镜像 二
    Nexus安装
    使用docker-compose 大杀器来部署服务 上
    Docker-Compose入门
    nvidia-docker命令详解
    安装使用NVIDIA-Docker-- 可使用GPU的Docker容器
    frp实现内网穿透
  • 原文地址:https://www.cnblogs.com/zhangxg/p/4534791.html
Copyright © 2011-2022 走看看