Question

这是我的xml文件： -

<?xml-stylesheet href="b.xsl" type="text/xsl"?>
<root>
  <child_1 entity_id = "1" value="Game" parent_id="0">
    <child_2 entity_id="2" value="Activities" parent_id="1">
      <child_3 entity_id="3" value="Physical1" parent_id="2">
        <child_6 entity_id="6" value="Cricket" parent_id="3">
          <child_7 entity_id="7" value="One Day" parent_id="6"/>
        </child_6>
      </child_3>
      <child_4 entity_id="4" value="Test1" parent_id="1">
        <child_8 entity_id="8" value="Test At Abc" parent_id="4"/>
      </child_4>
      <child_5 entity_id="5" value="Test2" parent_id="1">
        <child_9 entity_id="9" value="Test At Xyz" parent_id="5"/>
      </child_5>
    </child_2>
</child_1>
</root>

这是我的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:template match="*" mode="item">
    <xsl:choose>
      <xsl:when test="self::node()/child::*">
        <li>
          <xsl:value-of select="@value"/>
          <xsl:apply-templates select="current()[*]"/>
        </li>
      </xsl:when>
      <xsl:otherwise>
        <li onclick="final()">
          <xsl:value-of select="@value"/>
          <xsl:apply-templates select="current()[*]"/>
        </li>
      </xsl:otherwise>
    </xsl:choose>
  </xsl:template>

  <xsl:template match="*/*/*">
    <ul>
      <xsl:apply-templates select="*[1] | node()[current()/ancestor::*[3]]" mode="item"/>
    </ul>
  </xsl:template>
</xsl:stylesheet>

这里我尝试从xml文件中获取活动
如果最后一个li然后在那里设置一个函数作为属性类型，如： -

<li onclick ="final()">One Day</li>

它只设置了没有孩子的最后一个... ... 现在我创建一个javascript文件来获取xslt和html输出。： -

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <title>Untitled Page</title>
    <script>
    function final(){
        $('li:not(:has(*))').click(function(){
        alert('click');
        $('#result').text($(this).text());
        });
        }
    </script>
    <script>
        var xml = loadXMLDoc("final.xml");
        var xsl = loadXMLDoc("b.xsl");



        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 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() {
            var targetElement = document.getElementById("load");

            // code for IE
            if (window.ActiveXObject) {
                transformActiveX(xml, xsl, targetElement);
            }
            // code for Mozilla, Firefox, Opera, etc.
            else if (document.implementation && 
                     document.implementation.createDocument) {
                transformOther(xml, xsl, targetElement);
            }
        }


    </script>
</head>
<body onload="displayResult()">
    <div id="load">
    </div>
    <div id="result">result</div>
</body>

这是我的javascript代码，点击最后一个，其值附加在<div id="result">

<script>
        function final(){
            $('li:not(:has(*))').click(function(){
            alert('click');
            $('#result').text($(this).text());
            });
            }
        </script>

现在的问题是我点击它的最后工作，但它的工作类似于循环。当我尝试一个警报时，我遇到了这个问题。

Answer 1

很难知道你在尝试什么。因此，首先解释你在做什么。你生成一个像这样的html片段（通过xlst）：

<ul>
    <li>Physical1<ul>
        <li>Cricket<ul>
            <li onclick="final()">One Day</li>
        </ul>
        </li>
    </ul>
    </li>
</ul>

在没有孩子的li元素中有一个onlclick handlder（onclick="final()）。

function final(){
        $('li:not(:has(*))').click(function(){
        alert('click');
        $('#result').text($(this).text());
        });
        }

首先点击“One Day”项目调用final（）。最后的函数是为没有子元素的所有li元素设置新的onclick处理程序。 哪个是唯一且已经作为onclick hanlder 的最终元素由于事件传播，下一次点击会调用新的hanlder，然后是final。哪个安装了一个新的onclick处理程序。现在我们已经在元素上有三个处理程序了。每次点击再添加一个。要停止此操作，您可以尝试使用event.stopPropagation();或删除事件处理程序attr('onclick', '').off('click');

function final() {
    var lis = $('li:not(:has(*))');
    lis.attr('onclick', '').off('click');
        $('li:not(:has(*))').click(function(event) {
              $('#result').text($(this).text());
        });
    }

但我更怀疑选择器是错误的$('li:not(:has(*))') 更多评论：
- 将事件处理程序设置为父<li>元素也没意义。因为li元素彼此包含（正确！），所以单击子元素也会触发父元素的处理程序。
- 因此（也许）你应该在li元素的内容（文本）周围添加元素。（<li><span>Physical1</span><ul><li>...）
- 比你可以添加onclick处理程序的span元素 - 如果只有“final”元素应该触发事件，则不需要设置任何新的单击功能。

function final(){
        alert('click');
        $('#result').text($(this).text());
        }

在li上点击事件并不完美

1 个答案: