Question

我有以下HTML：

{{1}}

ID为ID＆＃34;系统1＆＃34;完美显示，当链接名为＆＃34; system1＆＃34;点击。但是，当点击名为＆＃34; system2＆＃34;的链接时具有ID＆＃34; system2＆＃34;的DIV;没有显示。

有人可以解释一下，为什么这不起作用以及如何使其发挥作用？

Answer 1

使用Visual Studio向我显示

<div class="connectionClass" id="system1" style="display: none;">`

错过了结束标记</div>。我假设你想把</div>放在system2标签之前：

<div class="connectionClass" id="system2" style="display: none;">

缺少标签会导致布局问题

对于调试JavaScript，请务必使用浏览器控制台，以便显示任何错误（按F12键）

Answer 2

JavaScript对Umlaut没有任何了解。

因此，在JavaScript中，systemLoeschen和systemLöschen不一样。

将您的函数名称保留为英文是个好主意。部分是为了避免这样的问题（我不得不向多个法国程序员提供这个建议......）而且因为语言本身的关键词已经是英语，坚持下去也是有道理的。

Answer 3

您永远不会关闭<div id="system1">代码，因此<div id="system2">实际上是内部。单击system1链接时隐藏system2（包括system2）中的所有内容。

添加

</div>

之前

<div class="connectionClass" id="system2" style="display: none;">

<script>
  function systemAnzeigen(systemid) {
    var elms = document.getElementsByClassName("connectionClass");

    for (i = 0; i < elms.length; i++) {
      if (elms.item(i).id == systemid) {
        elms.item(i).style.display = 'block';
      } else {
        elms.item(i).style.display = 'none';
      }

    }
  }


  function systemAendern(systemid) {
    alert("System aendern: " + systemid);
  }

  function systemLöschen(systemid) {
    alert("System loeschen: " + systemid);
  }
</script>
</HEAD>

<BODY>

  <strong>Error listing systems: </strong> [ISC.0049.9009] Missing required property switch at 'unlabeled BRANCH'
  <P>

    <strong>Konfigurierete Systeme</strong>

    <TABLE class="GPMTable" style="font-family:sans-serif;font-size:small">
      <TR>
        <TH>System-ID</TH>
        <TH>Ändern</TH>
        <TH>Löschen</TH>
      </TR>

      <TR>
        <TD><a href="javascript:systemAnzeigen('system1');">system1</a>
        </TD>
        <TD>
          <img onclick="javascript:systemAendern('system1');" src="edit.gif" />
        </TD>
        <TD>
          <img onclick="javascript:systemLoeschen('system1');" src="delete.gif" />
        </TD>
      </TR>

      <TR>
        <TD><a href="javascript:systemAnzeigen('system2');">system2</a>
        </TD>
        <TD>
          <img onclick="javascript:systemAendern('system2');" src="edit.gif" />
        </TD>
        <TD>
          <img onclick="javascript:systemLoeschen('system2');" src="delete.gif" />
        </TD>
      </TR>
    </TABLE>


    <div class="connectionClass" id="system1" style="display: none;">

      <h4>system1</h4>

      <TABLE class="GPMTable" style="font-family:sans-serif;font-size:small">
        <TR>
          <TH>Connection-ID</TH>
          <TH>Protokoll</TH>
          <TH>Mapping</TH>
        </TR>

        <TR>
          <TD>poller1</TD>
          <TD>SFTP</TD>
          <TD></TD>

        </TR>

        <TR>
          <TD>soapConnection1</TD>
          <TD>SOAP</TD>
          <TD>mymapping</TD>

        </TR>
      </TABLE>

    </div>
    <div class="connectionClass" id="system2" style="display: none;">

      <h4>system2</h4>

      <TABLE class="GPMTable" style="font-family:sans-serif;font-size:small">
        <TR>
          <TH>Connection-ID</TH>
          <TH>Protokoll</TH>
          <TH>Mapping</TH>
        </TR>

        <TR>
          <TD>RestConnection1</TD>
          <TD>REST</TD>
          <TD></TD>

        </TR>
      </TABLE>
    </div>

    <P><a href="index.html">Home</a>
      <P>

Answer 4

您的HTML标记错误。从我看到它在“system1”div中渲染“system2”，所以当你隐藏“system1”时它也会隐藏它的子节点（“system2”）

<TITLE>GPM ConnectionModul Systems Configuration</TITLE>
<script>
    function systemAnzeigen(systemid) {
        var elms = document.getElementsByClassName("connectionClass");

        for (i = 0; i < elms.length; i++) {
            if (elms.item(i).id == systemid) {
                elms.item(i).style.display = 'block';
            } else {
                elms.item(i).style.display = 'none';
            }

        }
    }


    function systemAendern(systemid) {
        alert("System aendern: " + systemid);
    }

    function systemLöschen(systemid) {
        alert("System loeschen: " + systemid);
    }
</script>
<BODY> <strong>Error listing systems: </strong> [ISC.0049.9009] Missing required property switch at 'unlabeled BRANCH'
    <P>
<strong>Konfigurierete Systeme</strong>

        <TABLE class="GPMTable" style="font-family:sans-serif;font-size:small">
            <TR>
                <TH>System-ID</TH>
                <TH>Ändern</TH>
                <TH>Löschen</TH>
            </TR>
            <TR>
                <TD><a href="javascript:systemAnzeigen('system1');">system1</a>
                </TD>
                <TD>
                    <img onclick="javascript:systemAendern('system1');" src="edit.gif" />
                </TD>
                <TD>
                    <img onclick="javascript:systemLoeschen('system1');" src="delete.gif" />
                </TD>
            </TR>
            <TR>
                <TD><a href="javascript:systemAnzeigen('system2');">system2</a>
                </TD>
                <TD>
                    <img onclick="javascript:systemAendern('system2');" src="edit.gif" />
                </TD>
                <TD>
                    <img onclick="javascript:systemLoeschen('system2');" src="delete.gif" />
                </TD>
            </TR>
        </TABLE>
        <div class="connectionClass" id="system1" style="display: none;">
            
<h4>system1</h4>

            <TABLE class="GPMTable" style="font-family:sans-serif;font-size:small">
                <TR>
                    <TH>Connection-ID</TH>
                    <TH>Protokoll</TH>
                    <TH>Mapping</TH>
                </TR>
                <TR>
                    <TD>poller1</TD>
                    <TD>SFTP</TD>
                    <TD></TD>
                </TR>
                <TR>
                    <TD>soapConnection1</TD>
                    <TD>SOAP</TD>
                    <TD>mymapping</TD>
                </TR>
            </TABLE>
        </div>
        
        <div class="connectionClass" id="system2" style="display: none;">
                
                <h4>system2</h4>

                <TABLE class="GPMTable" style="font-family:sans-serif;font-size:small">
                    <TR>
                        <TH>Connection-ID</TH>
                        <TH>Protokoll</TH>
                        <TH>Mapping</TH>
                    </TR>
                    <TR>
                        <TD>RestConnection1</TD>
                        <TD>REST</TD>
                        <TD></TD>
                    </TR>
                </TABLE>
            </div>

使用Javascript和getElementById显示DIV

4 个答案: