Analysis of a better way to display hidden layers in javascript

Analysis of a better way to display hidden layers in javascript_javascript skills

WBOY

Release： 2016-05-16 19:00:20

Original

1296 people have browsed it

This is a Q&A page. The designer hopes that after clicking on the relevant question, the corresponding answer will be displayed below it. This is a relatively common function. The usual solution is to treat the "answer" as a child element of the entire question container, and then click the button on the parent element to expand the corresponding child element. Match titles and answers through the correspondence between parent and child elements.

However, scripting was not considered when writing HTML (the requirement was added later), so there is no parent-child relationship between the answer and the title. The html code is as follows.

So, another method is needed to match answers and titles. We can match elements by capturing their position. In other words, the first title must correspond to the first answer in the entire sequence, and the second title must correspond to the second answer. In this way, you can control their correspondence regardless of the html structure.

Copy code The code is as follows:

numbertitle Editor/Asker

1Do I need to pay if I want to open a small store?< a href="#" title="" class="openLink"> Customer Service

At this stage, Yuce will not charge any fees, so users do not need to worry.

In addition to the functional modules of value-added services. Customer Service
2Want to open Does the store need to pay? Customer Service< /span>

At this stage, there is no charge for it, so please use Don't worry.

In addition to the functional modules of value-added services. Customer Service

Script explanation: When the openLink icon is clicked, the answer with the same position in the sequence as openLink is displayed. Here you need to put the onclick event inside the closure and wait until the for loop ends before it is activated. If there is no such closure, no matter which openLink is clicked, the value of openLink.length will be displayed.

Copy code The code is as follows:

document.getElementsByClassName = function(eleClassName) 
{ 
var getEleClass = [];//Define an array
var myclass = new RegExp("\b" eleClassName "\b");//Create a regular expression object
var elem = this.getElementsByTagName("*");//Get all elements in the document 
for(var h=0;h{ 
var classes = elem[h ].className;//Get the class object
if (myclass.test(classes)) getEleClass.push(elem[h]);//Regular comparison, get the desired CLASS object
} 
return getEleClass;//Return array 
} 
//This is the method to capture class. I have been using it. Copy it and it will be OK. 

var answer = document.getElementsByClassName("answer"); 
var openLink = document.getElementsByClassName("openLink"); 
var closeLink = document.getElementsByClassName("closeLink"); 

for (i = 0; i< openLink.length ; i ) 
{ 
( 
function(i){ 
openLink[i].onclick = function (){ 
var j = i; 
answer[j].style.display = "block" 
} 
closeLink[i].onclick = function (){ 
var j = i; 
 answer[j].style.display = "none" 
} 
} 
)(i); 
}