zoukankan      html  css  js  c++  java
  • 自定义属性,第一节——JS学习笔记2015-5-25(第38天)

     1 <!DOCTYPE HTML>
     2 <html>
     3 <head>
     4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     5 <title>无标题文档</title>
     6 <style>
     7 li { list-style:none; width:114px; height:140px; background:url(img/normal.png); float:left; margin-right:20px; }
     8 </style>
     9 <script>
    10 window.onload = function (){
    11     var aLi = document.getElementsByTagName('li');
    12     // var onOff = true;    // 只能控制一组!
    13     
    14     for( var i=0; i<aLi.length; i++ ){
    15         
    16         aLi[i].onOff = true;
    17         
    18         aLi[i].onclick = function (){
    19             
    20             // alert( this.style.background );
    21             // 背景不能判断
    22             // color red #f00 
    23             // 相对路径
    24             
    25             if ( this.onOff ) {
    26                 this.style.background = 'url(img/active.png)';
    27                 this.onOff = false;
    28             } else {
    29                 this.style.background = 'url(img/normal.png)';
    30                 this.onOff = true;
    31             }
    32         };
    33     }
    34 };
    35 </script>
    36 </head>
    37 
    38 <body>
    39 
    40 <ul>
    41     <li></li>
    42     <li></li>
    43     <li></li>
    44 </ul>
    45 
    46 </body>
    47 </html>

    思路:

    首先找到所有的li元素,

    然后给这里的li元素自定义属性值为true;// 

     var aLi = document.getElementsByTagName('li');

    如何给他们每个li都添加true呢? 就是使用for循环来实现;

    // for( var i=0; i<aLi.length; i++ )

    同时我们希望看到点击后产生一定的效果,所有这里需要一个点击事件,每个li都会有点击事件,所以有onclick这样一个事件

    // 在循环体内:

    aLi[i].onclick = function (){}

    点击之后呢?点击之后我们来进行判断(所以需要if...else...语句)。如果判断结果是true执行相应的语言,然后改变其布尔值;用于下次判断;

    其实从解决问题的思路来看,实际上应该是解决什么问题?问题就是希望点击li列表,产生不同的效果

    那么如何产生不同的效果呢?通过判断

    那通过什么来判断呢?通过布尔值,布尔值从何而来? 从自定义属性而来

    自定义属性如何添加?通过for循环

    这样一个倒推的关系来催出解决方案;

  • 相关阅读:
    转载(腾讯云社区)——详解django-apscheduler的使用方法
    pipenv——python包管理工具
    xx系统需求进度02
    xx系统需求进度01
    Hbase简介
    第七周总结
    《软件需求十步走》阅读笔记一
    第六周总结
    HDFS
    金字塔表达方法
  • 原文地址:https://www.cnblogs.com/zhangxg/p/4529431.html
Copyright © 2011-2022 走看看