个人中心
gpt4 book ai didi

javascript - 在 Html 文件中的值显示上设置单击事件，并希望在单击它时显示子元素

转载 作者：行者123 更新时间：2023-11-30 05:51:11 25 4
gpt4 key购买 nike

这是我的 xml 文件:-

<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="final.xsl"?>  
  <root>
    <child1 entity_id = "1" value= "Asia">
        <child2 entity_id = "2" value = "india">
            <child3 entity_id = "3" value = "Gujarat">
                <child5 entity_id = "5" value ="Rajkot"></child5>
            </child3>
            <child4 entity_id = "4" value = "Rajshthan">
                <child6 entity_id = "6" value = "Ajmer"></child6>
            </child4>
        </child2>
    </child1>
    </root>

这是我的 XSLT 文件:-

<xsl:template match="*">
    <xsl:for-each select="//child2">
    <xsl:value-of select="*"/>
    <xsl:value-of select="@value" />    
</xsl:for-each>

这是我的 html 代码:-

<script>
function loadXMLDoc(dname)
{
    if (window.XMLHttpRequest)
    {
        xhttp=new XMLHttpRequest();
    }
    else
    {
        xhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xhttp.open("GET",dname,false);
    xhttp.send("");
    return xhttp.responseXML;
}

function displayResult()
{
    xml=loadXMLDoc("final.xml");
    xsl=loadXMLDoc("books05.xsl");
    // code for IE
    if (window.ActiveXObject)
    {
        xml.addParameter("rss", test); 
        ex=xml.transformNode(xsl);
        document.getElementById("load").innerHTML=ex;
    }
    // code for Mozilla, Firefox, Opera, etc.
    else if (document.implementation && document.implementation.createDocument)
    {
        xsltProcessor=new XSLTProcessor();
        xsltProcessor.importStylesheet(xsl);
        resultDocument = xsltProcessor.transformToFragment(xml,document);
        document.getElementById("load").appendChild(resultDocument);
    }
}
</script>
<body onload="displayResult()">
<div id="load" />
</body>

输出是:-

India

现在我想在印度设置点击事件...点击印度然后显示古吉拉特邦和拉杰什坦之类的子元素...在显示古吉拉特邦和拉杰什坦时隐藏印度...

最佳答案

这应该有效。首先，您可以像这样定义 XSLT:

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output method="html" indent="yes" omit-xml-declaration="yes"/>
  <xsl:param name="selected" />

  <xsl:template match="/*" priority="2">
    <xsl:apply-templates select="*[not($selected)] | //*[@entity_id = $selected]/*" />
  </xsl:template>

  <xsl:template match="*[*]">
    <span onclick="displayResult('{@entity_id}');">
      <xsl:call-template name="ItemText" />
    </span>
  </xsl:template>

  <xsl:template match="*" name="ItemText">
    <xsl:value-of select="concat(@value, '&#xA0;')"/>
  </xsl:template>
</xsl:stylesheet>

当它在没有任何参数的情况下运行时，它会生成一个顶级项目的列表，并带有 onclick 处理程序来调用带有自己的 entity_id 的 JavaScript 函数:

<span onclick="displayResult('1');">Asia </span>

当它以 entity_id 作为 selected 参数的值运行时，它返回具有该实体 id 的项目的子项列表:

<span onclick="displayResult('3');">Gujarat </span>
<span onclick="displayResult('4');">Rajshthan </span>

然后，您可以像这样编写您的 HTML 页面:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Untitled Page</title>
    <script>
        var xml = loadXMLDoc("final.xml");
        var xsl = loadXMLDoc("books05.xsl");

        function loadXMLDocActiveX(location) {
            var doc = new ActiveXObject("MSXML2.FreeThreadedDOMDocument");
            doc.async = false;
            doc.load(location);
            return doc;
        }

        function loadXMLDocOther(location) {
            xhttp = new XMLHttpRequest();
            xhttp.open("GET", location, false);
            xhttp.send("");
            return xhttp.responseXML;
        }

        function loadXMLDoc(dname) {
            if (window.ActiveXObject) {
                return loadXMLDocActiveX(dname);
            }
            else if (window.XMLHttpRequest) {
                return loadXMLDocOther(dname);
            }
        }

        function transformActiveX(xml, xsl, target, selected) {
            var transform = new ActiveXObject("MSXML2.XSLTemplate");
            transform.stylesheet = xsl;
            var processor = transform.createProcessor();
            processor.input = xml;

            if (selected) {
                processor.addParameter("selected", selected);
            }

            processor.transform();
            target.innerHTML = processor.output;
        }

        function transformOther(xml, xsl, target, selected) {
            var xsltProcessor = new XSLTProcessor();
            xsltProcessor.importStylesheet(xsl);

            if (selected) {
                xsltProcessor.setParameter(null, "selected", selected);
            }

            var resultDocument = xsltProcessor.transformToFragment(xml, document);
            target.innerHTML = "";
            target.appendChild(resultDocument);
        }

        function displayResult(selected) {
            var targetElement = document.getElementById("load");

            // code for IE
            if (window.ActiveXObject) {
                transformActiveX(xml, xsl, targetElement, selected);
            }
            // code for Mozilla, Firefox, Opera, etc.
            else if (document.implementation && 
                     document.implementation.createDocument) {
                transformOther(xml, xsl, targetElement, selected);
            }
        }
    </script>
</head>
<body onload="displayResult()">
    <div id="load">
    </div>
</body>
</html>

注意 displayResult() 函数现在有一个参数，当这个参数有一个值时，它将这个值作为 XSLT 参数传递给 XSLT。

应该可以了!

关于javascript - 在 Html 文件中的值显示上设置单击事件，并希望在单击它时显示子元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14788020/

25 4 0
文章推荐： java - 不匹配的关闭 ')' 模式异常
文章推荐： java - Spring Boot 用户注册 - 将验证错误发送到 UI
文章推荐： java - 如何在 Java 中检索 native 字体名称？
文章推荐： java - CSV , JAVA 和 HSQLDB
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com