JavaScript shows hidden layer a better way to analyze _javascript techniques.

This is a Q&a page where the designer wants to be able to click on the relevant question and show the corresponding answer below it. This is a more common feature, and the usual solution is to treat the answer as a child of the entire problem container, then click the button on the parent element to expand the corresponding child element. Match the title and the answer with the parent-child element's corresponding relationship.

But when writing HTML did not take into account the scripting (requirements are added), so the answer and the title does not have a parent-child relationship can correspond. The HTML code is as follows.

So here's another way to match the answer and the title. We can match them by capturing the position of the elements. In other words, the first title, the corresponding affirmation is the first answer in the whole sequence, the second title corresponding to the second answer is definitely. This allows you to ignore the HTML structure to control their correspondence.

Copy Code code as follows:

<ul class= "Qusetionlist" >
<li class= "Liheader" ><span class= "colabc-a" > Symbol </span><span class= "Colabc-b" > title </span ><span class= "Colabc-c" > Editor/Creator </span></li>

<li class= "Libody" ><span class= "colabc-a" >1</span><span class= "ColABC-B" > Want to open a store for a fee? </ Span><span class= "colabc-c" ><a href= "#" title= "" class= "OpenLink" ></a> customer service </span></li >
<li class= "Answer" ><span class= "Colabc-b" >
The present stage is therefore not charged for any fee, please do not worry about the user. <BR>
In addition to the functional modules that add value services. </span><span class= "colabc-c" ><a href= "#" title= "" class= "Closelink" ></a> customer service </span> </li>

<li class= "Libody" ><span class= "colabc-a" >2</span><span class= "ColABC-B" > Want to open a store for a fee? </ Span><span class= "colabc-c" ><a href= "#" title= "" class= "OpenLink" ></a> customer service </span></li >
<li class= "Answer" ><span class= "Colabc-b" >
The present stage is therefore not charged for any fee, please do not worry about the user. <BR>
In addition to the functional modules that add value services. </span><span class= "colabc-c" ><a href= "#" title= "" class= "Closelink" ></a> customer service </span> </li>
</ul>

Script explanation: When clicked OpenLink this icon, displays and OpenLink in the sequence the position identical answer. The OnClick event needs to be placed inside the closure, and will not be activated until the for loop is finished. Without this layer of closure, whichever openlink is clicked, the display will be the Openlink.length value.

Copy Code code as follows:

Document.getelementsbyclassname = function (eleclassname)
{
var geteleclass = [];//defines an array
var myclass = new RegExp ("\\b" +eleclassname+ "\\b");//create a regular expression pair like
var elem = this.getelementsbytagname ("*");/get all the elements in the document
for (Var h=0;h<elem.length;h++)
{
var classes = elem[h].classname;//Get class pair image
if (Myclass.test (classes)) Geteleclass.push (elem[h));//Regular comparison, take the desired class to the image
}
Return geteleclass;//Array
}
Above this is the method that captures class, I always use it, copy come over 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);
}