The concrete implementation of JavaScript exclusive thinking

In the previous blog, Xiao Xiong updated the methods of related operation elements, but if there are the same group of elements, and we want a certain element to achieve a certain style, what should we do? The idea of circular exclusion comes into play here.

The algorithm of exclusive thinking is:
Eliminate others (including yourself), and then set the effect you want to achieve for yourself. In short, the implementation steps of the exclusive idea are to clear all elements and set the current element.

It can be simply understood as:

Clear styles for all elements (kill others)
Set the style for the current element (leave it to me)

It should be noted that the order here cannot be reversed.
For example, there are five buttons on the page, and we want to implement a cyclic click event for it: when a button is clicked, the color of that button will change. How should we do it?

1. Let's create five buttons first.
As shown below:

    <button>Button 1</button>
    <button>Button 2</button>
    <button>Button 3</button>
    <button>Button 4</button>
    <button>Button 5</button>

2. Get elements

<script>
    //Get the element var btn = document.getElementsByTagName('button');
     console.log(btn);
</script>

3. Loop through the print buttons

for(var i =0; i<btn.length;i++){
	console.log(btn[i]
	}

4. Add a click event to each button in the first for loop. First, clear the styles of all buttons in the inner loop, and then add the style to the currently clicked button in the outer loop.

btn[i].onclick = function(){
	for(var j =0;j<btn.length;j++){
		btn[j].style.backgroundColor = '';
		}
	this.style.backgroundColor = 'blue';
}

The final effect is:

insert image description here

Let’s take a look at some examples!

1. Implement simple tab bar switching function

The code is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- Write a complete tab switching effect page-->
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box_1 {
            width: 800px;
            height: 400px;
            background-color:rgb(141, 169, 173);
            margin: 100px auto;
        }
        ul {
            position:absolute;
            top: 64px;
            left:220px;
            height: 35px;
            line-height: 35px;
            text-align: center;
        }
        li {
            width: 80px;
            height: 35px;
            list-style: none;
            float: left;
            border: 1px solid #ccc;
            margin-left: 2px;
            border-top-left-radius: 6px;
            border-top-right-radius: 6px ;
        }
        .li1 {
            font-weight: 700;
            color: black;
            border-bottom: none;
            background-color: skyblue;
            cursor: pointer;
        }
        .item{
            display:none;
        }
    </style>
</head>
<body>
    <div class = 'box'>
        <ul>
            <li class='li1'>Tag 1</li>
            <li>Label 2</li>
            <li class = 'li2' style="width:150px">Label with adaptive width</li>
        </ul>
       <div class="box_1">
        <div class="item" style = "display:block">Content of the first tag</div>
        <div class="item">The content of the second tag</div>
        <div class="item">Contents of adaptive width labels</div>
       </div>
    </div>
    <script>
        var li = document.querySelectorAll('li');
        console.log(li);
        var item = document.querySelectorAll('.item');
        console.log(item);
        for(var i =0;i<li.length;i++){
            li[i].setAttribute('index',i);
            li[i].onclick = function(){
                for(var j =0;j<item.length;j++){
                    li[j].className = '';
                    console.log(li[i]);
                }
                this.className = 'li1';
                var index = this.getAttribute('index');
                console.log(index);
                for(var k = 0; k < item.length; k++) {
                    item[k].style.display='none';
                }
                item[index].style.display = 'block';
            }
        }
    </script>
</body>
</html>

The effect is:

insert image description here

2. Implement a dynamic clickable survey result display page, requiring that the corresponding progress bar increases when the check box option is clicked.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 700px;
            margin: 10px auto;
        }
        .bar {
			width:200px;
			height: 15px;
			padding: 1px;
            background-color: rgb(250, 249, 249);
		}
        .bar_in{
            width:7%;
            height:100%;
			transition: width 0.5s;

        }
		.bar_in1 {
			background-color: orange;
		}
        .bar_in2{
            background-color: yellow;
        }
        .bar_in3{
            background-color: brown;
        }
        .bar_in4{
            background-color: chocolate;
        }
        .bar_in5{
            background-color: green;
        }
        .bar_in6{
            background-color: blue;
        }
        .bar_in7{
            background-color: cornflowerblue;
        }
        .bar_in8{
            background-color: deeppink;
        }
        .bar_in9{
            background-color: rgb(171, 204, 23);
        }
        .bar_in10{
            background-color: red;
        }
        tr{
            width:800px;
            height: 40px;
           
        }
        td{
            font-size: 14px;
            width: 200px;
            line-height: 40px;
            border-bottom: 1px solid #ccc;
        }
         tr #no1{
            width: 300px;
        }
        .header{
            font-size: 16px;
            font-weight: 700;
        }
        .t1 {
            width: 500px;
        }
        span{
            color:red;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div class="box">
        <table>
            <tr>
                <td colspan="4" class= 'header'>Are you moved by the "most beautiful rural female teacher"? <span>(required)</span></td>
            </tr>
            <tr>
                <td class='t1'><input type="checkbox" name="" >I am very touched, she is very beautiful</td>
                <td>
                    <div class="bar">
                    <div class="bar_in bar_in1">
                    </div>
                </div>
                </td>
                <td>0(0%)</td>
            </tr>
            <tr>
                <td class='t1'><input type="checkbox" name="" id="">I am very touched. She is very beautiful</td>
                <td>
                    <div class="bar">
                    <div class="bar_in bar_in2">
                    </div>
                </div>
                </td>
                <td>335733(96.16%)</td>
            </tr>
            <tr>
                <td class='t1'><input type="checkbox" name="" id="">No feeling, there are many such things</td>
                <td>
                    <div class="bar">
                    <div class="bar_in bar_in3">
                    </div>
                </div>
                </td>
                <td>4997(1.43%)</td>
            </tr>
            <tr>
                <td class='t1'><input type="checkbox" name="" id="">Not moved, maybe it's hype</td>
                <td>
                    <div class="bar">
                    <div class="bar_in bar_in4">
                    </div>
                </div>
                </td>
                <td>8398(2.41%)</td>
            </tr>
        </table>
        <table>
            <tr>
                <td colspan="3" class= 'header'>What would you be willing to do for Li Ling and her school? <span>(required)</span></td>
            </tr>
            <tr>
                <td class="t1"><input type="checkbox" name="" id="" >Donate books to them so that they can have a reading room</td>
                <td>
                    <div class="bar">
                    <div class="bar_in bar_in5">
                    </div>
                </div>
                </td>
                <td>163002(45.89%)</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="" id="">Donate money to them so they can repair the school</td>
                <td>
                    <div class="bar">
                    <div class="bar_in bar_in6">
                    </div>
                </div>
                </td>
                <td>52692(15.09%)</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="" id="">Tell your friends about Li Ling's story</td>
                <td>
                    <div class="bar">
                    <div class="bar_in bar_in7">
                    </div>
                </div>
                </td>
                <td>118533(33.96%)</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="" id="">Do nothing</td>
                <td>
                    <div class="bar">
                    <div class="bar_in bar_in8">
                    </div>
                </div>
                </td>
                <td>14881(4.26%)</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="" id="">Do nothing</td>
                <td>
                    <div class="bar">
                    <div class="bar_in bar_in9">
                    </div>
                </div>
                </td>
                <td>0(0%)</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="" id="">Do nothing</td>
                <td>
                    <div class="bar">
                    <div class="bar_in bar_in10">
                    </div>
                </div>
                </td>
                <td>0(0%)</td>
            </tr>
        </table>
    </div>
    <script>
        var input = document.querySelectorAll('input');
        var barin = document.querySelectorAll('.bar_in');
        var w = [10,98,30,25,50,22,38,30,34,20,20];
        console.log(typeof(5+'%'));
        console.log(barin);
        console.log(input);
        for(var i =0;i<input.length;i++){
            input[i].setAttribute('index',i)
            input[i].onclick = function(){
                 var index = this.getAttribute('index')
                barin[index].style.width= w[index]+'%';
            }
        }
    </script>
</body>
</html>

The effect is:

insert image description here

This is the end of this article about the specific implementation of JavaScript exclusive ideas. For more relevant JavaScript exclusive content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in: