发表于: 2019-11-13 19:21:27

1 924


今日完成:

昨天写的那个关于选项的js还是有点问题的。

因为三栏表单复用同一样式,按js中原来逻辑,整个页面只能选中一个按钮。

需要的是一组只能选中一个,所以修改一下:

<script>

function divfunction(obj) {

var tags = document.getElementsByClassName("annulus");
  for (var i = 0; i < tags.length; i++) {
    if (obj.id.split("-")[1] == tags[i].id.split("-")[1]) {
      if (tags[i].id == obj.id) {
        document.getElementById(obj.id).className = "circle";
        return;
        } else {
        tags[i].className = "circle";
        }
     } else {
   }
  }
document.getElementById(obj.id).className = "annulus";

}


</script>

给每组按钮的id名都设置成相同的后缀,如:

箱型的选择:

<div id="1-style" class="circle" onclick="divfunction(this)"></div>
<div id="2-style" class="circle" onclick="divfunction(this)"></div>
<div id="3-style" class="circle" onclick="divfunction(this)"></div>

尺寸的选择:

<div id="1-od" class="circle" onclick="divfunction(this)"></div>
<div id="2-od" class="circle" onclick="divfunction(this)"></div>


先找出所有已被选中的按钮元素,

然后遍历这里元素,如果元素的id后缀与事件发起者的id后缀相同(说明他们是一组按钮),然后还是按昨天的

逻辑进行操作就好了。如果后缀不同,则不进行任何操作,继续遍历。


css发挥功能在很大程度上依赖于元素的父子关系。

后代选择符中,规则中的选择符由两个或多个空格分隔的选择符构成。

h1  em  {color: gray;}

这个规则把作为h1元素后代的em元素中的文本显示为灰色。其他em元素,不受这个规则影响。

选择子元素 

有时我们不想选择所有后代元素,而是想缩小范围,只选择一个元素的子元素。

比如说想选择作为h1元素的子元素的strong元素(而不是层级更深的后代)。为此,要使用子代连结符,即大于号(>):

h1 > strong {color: red;}

这个规则将把第一个h1中的strong元素显示为红色,第二个则不受影响:

<h1>This is <strong>very</strong> important.<h1>

<h1>This is<em>really<strong>very</strong></em> important.</h1>

选择紧邻同胞元素

假设你i想装饰紧跟在一个标题后面的段落,或者为紧跟在一个段落后面的列表设定特殊的外边距。若想选择同一个父元素中紧跟在另一个元素后面的一个元素,要使用紧邻同胞连接符,即一个加号(+)。

若想把紧跟在h1元素后面的段的上外边距去掉。可以这么写:

h1 + p {margin-top: 0;}

这个选择符的意思是,“选择的p元素紧跟在h1元素后面,而且二者同属一个父元素”。

选择后续同胞:

这个连接符使用波浪号(~)表示,选择一个元素后面同属一个父元素的另一个元素。

比如,若想让h2后面与它同属一个父元素的ol元素的文本倾斜,可以编写h2 ~ o1 {font-style: italic;} 两个元素不一定非得是紧邻同胞,不过是的话也能匹配。



遇到的问题:

很奇怪 喜欢写新代码  

但对于自己写过的css代码  真的是一眼也不想多看   

页面写的再垃圾也不想改

可能是自己css写的太烂 、太乱了,太难维护了 

希望以后自己能够克服这一点  



收获:


了解了js中return语句的用法

优化了昨天的代码


明日计划:

修改被打下来的任务,确定没有问题了再提交,减少师兄的工作量。




返回列表 返回列表
评论

    分享到