2013-04-25 3 views
0

작동하지의 : -클릭 이벤트이 내 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 파일에서 활동을 얻으려고
그리고 마지막 리는 다음과 같은 속성 유형으로이 하나 개의 기능을 설정 한 경우 : - ONL

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

을 y는 자식이있는 마지막 리를 설정하지 ...
는 지금은 XSLT를 얻기를위한 자바 스크립트 파일을 만들 오전 HTML output.:-

<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> 

이 그 값에 추가 마지막으로 리튬을 클릭 내 자바 스크립트 코드 <div id="result">

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

이제 문제는 내가 마지막으로 리에서의 작업을하지만, 루프 등의 작업 뭔가를 클릭 생각입니다. 나는 하나의 경고를하려고 할 때이 문제가있다.

답변

0

당신이 무엇을하려고 하는지를 아는 것은 꽤 어렵습니다. 먼저 여기에 대한 설명을하십시오.

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

자녀가없는 리튬 요소 하나 onlclick handlder (onclick="final())가있다 : 당신은 (XLST를 통해)이 같은 HTML 조각을 생성합니다.

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

"One Day"항목을 클릭하면 final()이 호출됩니다. 마지막 함수는 자식이없는 모든 li 요소에 새 onclick 처리기를 설정합니다. onclick hanlder와 같이 이미 최종본을 가진 유일한 요소입니다. 이벤트 전파로 인해 다음 번 클릭은 새로운 hanlder를 호출 한 후 최종적으로 호출합니다. 그러면 새로운 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 요소를 추가 할 수 있습니다.
- "최종"요소 만 이벤트를 트리거해야하는 경우 새 클릭 기능을 설정할 필요가 없습니다.

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

@ 잭 Php : 들여 쓰기에 대한 추가 정보가 있습니까? –

관련 문제