如何在 Javascript 中顯示/隱藏重疊的 div？

Question

我正在使用 Javascript 來解析 XML 文件，然后在 HTML 中正確顯示它。

我對所有這些技術都很陌生。 我正在做的是解析 XML 並生成 html 表單，用戶可以對其執行提交操作。 我正在成功顯示表單。 但是我每次都在新 div下的for 循環內生成表單，然后將新 div 分配給表的TD 。 現在我想在用戶點擊label時顯示特定的 div ，但由於它是在循環中生成的，它們彼此重疊，所以它只顯示最后一個 div。

如何在 Javascript 中顯示/隱藏重疊的 div？

這是我的jsfiddle 。

和XML文件：

<?xml version="1.0" encoding="UTF-8"?>
<CONTROLLERS>
    <CONTROLLER>
        <TITLE>User</TITLE>
        <ACTION>
            <LABEL>Create User</LABEL>
            <HTTP_METHOD>POST</HTTP_METHOD>
            <PARAMS>
               <PARAM><NAME>email</NAME></PARAM>
               <PARAM><NAME>user_name</NAME></PARAM>
               <PARAM><NAME>first_name</NAME></PARAM>
               <PARAM><NAME>last_name</NAME></PARAM>
            </PARAMS>
        </ACTION>
        <ACTION>
            <LABEL>Update User</LABEL>
            <HTTP_METHOD>POST</HTTP_METHOD>
            <PARAMS>
               <PARAM><NAME>id</NAME></PARAM>
               <PARAM><NAME>email</NAME></PARAM>
               <PARAM><NAME>user_name</NAME></PARAM>
               <PARAM><NAME>first_name</NAME></PARAM>
               <PARAM><NAME>last_name</NAME></PARAM>
            </PARAMS>
        </ACTION>
    </CONTROLLER>
    <CONTROLLER>
        <TITLE>Admin</TITLE>
        <ACTION>
            <LABEL>Create Admin</LABEL>
            <HTTP_METHOD>GET</HTTP_METHOD>
            <PARAMS>
               <PARAM><NAME>email</NAME></PARAM>
               <PARAM><NAME>admin_name</NAME></PARAM>
               <PARAM><NAME>password</NAME></PARAM>
            </PARAMS>
        </ACTION>
    </CONTROLLER>
</CONTROLLERS>

目前視圖看起來像

Answer 1

最好使用 css 類並在 jQuery 方法中調用它們。 Z-Index 將幫助您解決重疊<div>的問題。