A good method for analyzing the hidden layer of javascript display

This is a q & A page. The designer hopes to display the corresponding answer below the Q & A page after clicking Related Questions. This is a common feature. The common solution is to treat the "Answer" as the child element of the entire problem container, and then click the button on the parent element to expand the corresponding child element. Match the title and answer based on the parent-child relationship.

However, when I first wrote html, I did not take into account the script writing (the requirements are post-added). Therefore, there is no parent-child relationship between the answer and the title. The html code is as follows.

Therefore, another method is needed to match the answer and title. We can match the elements by capturing their positions. That is to say, the first title corresponds to the first answer in the whole sequence, and the second title corresponds to the second answer. In this way, you can ignore the html structure to control their ing.

Copy codeThe Code is as follows:
<Ul class = "qusetionList">
<Li class = "liHeader"> <span class = "colABC-A"> subject matter </span> <span class = "colABC-B"> </span> <span class = "colABC-C"> Publisher/publisher </span> </li>

<Li class = "liBody"> <span class = "colABC-A"> 1 </span> <span class = "colABC-B"> do I have to pay for the cost of opening A store?? </Span> <span class = "colABC-C"> <a href = "#" title = "" class = "openLink"> </a> customer service </span> </li>
<Li class = "answer"> <span class = "colABC-B">
This is because it is not charged for any usage, so you do not need to worry about it. <BR>
In addition to the functional modules of value-added 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"> do I have to pay for the cost of opening A store?? </Span> <span class = "colABC-C"> <a href = "#" title = "" class = "openLink"> </a> customer service </span> </li>
<Li class = "answer"> <span class = "colABC-B">
This is because it is not charged for any usage, so you do not need to worry about it. <BR>
In addition to the functional modules of value-added services. </Span> <span class = "colABC-C"> <a href = "#" title = "" class = "closeLink"> </a> customer service </span> </li>
</Ul>


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

Copy codeThe Code is as follows:
Document. getElementsByClassName = function (eleClassName)
{
Var getEleClass = []; // defines an array
Var myclass = new RegExp ("\ B" + eleClassName + "\ B"); // create a regular expression
Var elem = this. getElementsByTagName ("*"); // obtain all elements in the document
For (var h = 0; h <elem. length; h ++)
{
Var classes = elem [h]. className; // obtain the class Object
If (myclass. test (classes) getEleClass. push (elem [h]); // Regular Expression comparison, get the desired CLASS Object
}
Return getEleClass; // returns an array.
}
// This is the method for capturing the class above. I keep using it and 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 );
}