Question

这是xml：

<?xml version="1.0" encoding="UTF-8"?>
<file>
    <text>
        <title>Header1</title>
        <content>
            <p>
                <sentence>I bought <fruit>kiwi</fruit> at the grocery store.</sentence>
                <sentence>I also bought <fruit>bananas</fruit> at the store.</sentence>
            </p>
            <p>
                <sentence>She bought <fruit>kiwi</fruit> at the grocery store.</sentence>
                <sentence>She also bought <fruit>bananas</fruit> at the store.</sentence>
            </p>
        </content>
        <footer>Footer1</footer>
    </text>
    <text>
        <title>Header2</title>
        <content>
            <p>
                <sentence>He bought <fruit>pears</fruit> at the grocery store.</sentence>
                <sentence>He also bought <fruit>lemons</fruit> at the store.</sentence>
            </p>
            <p>
                <sentence>You bought <fruit>pears</fruit> at the grocery store.</sentence>
                <sentence>You also bought <fruit>lemons</fruit> at the store.</sentence>
            </p>
        </content>
        <footer>Footer2</footer>
    </text>
</file>

我正在尝试添加单击<sentence>时显示的模式弹出窗口，并在模式弹出窗口中显示整个<content>以及页眉和页脚。在添加模态内容<sentence>之后，我有以下xsl不显示任何<div>。另外，如何将唯一ID传递给模态内容，以便显示<content>所属的正确<sentence>？

<xsl:stylesheet version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

        <xsl:template match="/">
                    <xsl:apply-templates select="file/text/content/p"/>
    </xsl:template>

<xsl:template match="fruit">
<span style="color:red;">
<xsl:apply-templates/>
</span>
</xsl:template>

<xsl:template match="sentence[fruit]">
<p id="myBtn" onclick="myBtn()">
<xsl:apply-templates/>
</p>

<!-- The Modal -->
<div id="myModal" class="modal">

<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">&times;</span>
<h2>
<xsl:value-of select="file/text/title"/>
</h2>
</div>
<div class="modal-body">
<p><xsl:value-of select="file/text/content"/>
</p>
</div>
<div class="modal-footer">
<h3>
<xsl:value-of select="file/text/footer"/>
</h3>
</div>
</div>

<script>
// Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the sentence, open the modal
btn.onclick = function() {
modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>

</xsl:template>

</xsl:stylesheet>

Answer 1

使用

等XPath时

select="file/text/title"

你说“从当前元素中选择它的子文件，从这里选择它的子文本，从这里选择它的子标题”。

但是文件不是句子，所以你没有选择任何东西。

您需要选择“与当前元素位于同一文本元素中的标题元素”。那是

select="ancestor::text/title"

另外，如何将唯一ID传递给模态内容

您可以利用generate-id（）：

id="{generate-id()}"

或者你可以算一下到目前为止你经历了多少句话：

id="modal{count(preceding::sentence)}"

XSL XML：添加模式弹出窗口

1 个答案: