原生js选择某元素前面所有的兄弟元素添加类 后面所有的兄弟元素删除类

时间：2022-01-11 19:55:28

1.mv移动端实战系列视频教程课件

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Document</title>
        <style>
            #div div {
                width: 100%;
                height: 40px;
                margin: 10px 0;
                background-color: #ccc;
            }
            
            #div div.active {
                background-color: red;
            }
        </style>
    </head>
    <div id="div">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>

    <body>
        <script>
            function addClass(obj, sClass) {
                var aClass = obj.className.split(' ');
                if(!obj.className) {
                    obj.className = sClass;
                    return;
                }
                for(var i = 0; i < aClass.length; i++) {
                    if(aClass[i] === sClass) return;
                }
                obj.className += ' ' + sClass;
            }

            function removeClass(obj, sClass) {
                var aClass = obj.className.split(' ');
                if(!obj.className) return;
                for(var i = 0; i < aClass.length; i++) {
                    if(aClass[i] === sClass) {
                        aClass.splice(i, 1);
                        obj.className = aClass.join(' ');
                        break;
                    }
                }
            }
            var div = document.querySelector('#div')
            var divs = div.getElementsByTagName('div');
            for(var i = 0; i < divs.length; i++) {
                    divs[i].setAttribute('index', i)
                divs[i].onclick = function() {
                    var  num=this.attributes['index'].nodeValue 
                    for (var i = 0; i < divs.length; i++) {
                        if(i<=num){
//                            addClass(divs[i],'active')
                            divs[i].className='active'
                        }else{
                            divs[i].className=''
                            
                        }

                    }
                }
            

            }
        </script>
    </body>

</html>

 2.多组如星星评分

function evaluate() {
					var evals = document.querySelectorAll('.evaluate1');//三个父元素
					for(var i = 0; i < evals.length; i++) {
						addStars(evals[i]);//调用三次
					}

					function addStars(items) {//每次从父元素获取li的个数 循环  自定义属性 添加事件
						var lis = items.getElementsByTagName('li');
						for(var i = 0; i < lis.length; i++) {
							lis[i].setAttribute('index', i);
							lis[i].addEventListener('tap', function() {
								for(var i = 0; i < lis.length; i++) {
									if(i <= this.attributes['index'].nodeValue) {
										lis[i].className = 'current'
									} else {
										lis[i].className = ''
									}
								}

							}, false)
						}

					}
				}

 

标签：

相关文章