これは私の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 の場合、次のような属性タイプとして 1 つの関数を設定します。
<li onclick ="final()">One Day</li>
子を持たない最後のliのみを設定しました...
今、xsltおよびhtml出力を取得するための1つのjavascriptファイルを作成しています.:-
<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>
これは、最後のliをクリックしてその値を追加する私のJavaScriptコードです<div id="result">
<script>
function final(){
$('li:not(:has(*))').click(function(){
alert('click');
$('#result').text($(this).text());
});
}
</script>
今の問題は、最後のliをクリックしたところですが、その作業はforループのようなものです。1 つのアラートを実行しようとすると、この問題が発生しました。