在XSLT中单击更改图像

如何解决在XSLT中单击更改图像

我当时正在使用XSLT构建座椅布局，并遇到了一个问题，即单击座椅时会更改图像。

我想做的是，当我单击任意一个座位时，图像应更改为“选定”座位，即另一个图像。

我想知道XSLT是否可以做到这一点。我在PHP页面中使用它们。

XSL

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="html"/>
<xsl:template match="/">
    <html>
        <link rel="stylesheet" type="text/css" href="regularSeatLayout.css"/>
        <body>
            <div class="seats">
                <h2>
                    <center>Select Your Seats</center>
                </h2>
                <span>
                    <center>Screen Here</center>
                </span>
                <xsl:for-each select="hall/row">
                    <div class="row">
                        <div class="row-id">
                            <xsl:value-of select='@id' />
                        </div>
                        <xsl:for-each select='seat'>
                            <xsl:choose>
                                <xsl:when test=". = 'Double'">
                                    <img src="double.png" alt="Double Seat" />
                                </xsl:when>
                                
                                <xsl:otherwise>
                                    <img src="regular.png" alt="Regular Seat" />
                                </xsl:otherwise>
                            </xsl:choose>
                        </xsl:for-each>
                        <div class="row-id">
                            <xsl:value-of select='@id' />
                        </div>
                    </div>
                    <br/>
                </xsl:for-each>
            </div>
        </body>
    </html>
</xsl:template>
</xsl:stylesheet>

XML

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="regularSeatLayout.xsl"?>
<hall>
<row id='A'>
    <seat id='1'/>
    <seat id='2'/>
    <seat id='3'/>
    <seat id='4'/>
    <seat id='5'/>
    <seat id='6'/>
</row>

<row id='B'>
    <seat id='1'/>
    <seat id='2'/>
    <seat id='3'/>
    <seat id='4'/>
    <seat id='5'/>
    <seat id='6'/>
</row>

<row id='C'>
    <seat id='1'/>
    <seat id='2'/>
    <seat id='3'/>
    <seat id='4'/>
    <seat id='5'/>
    <seat id='6'>Double</seat>
</row>
</hall>

当前输出

谢谢您的帮助。

解决方法

使用经典XSLT 1.0，样式表仅生成一个HTML页面，然后，必须由HTML页面中的Javascript处理诸如单击按钮之类的事件。如果需要，Javascript可以调用另一个XSLT转换来更新HTML页面，或者可以直接更新它。

还有一种选择，即以Saxon-JS产品的形式使用XSLT 3.0。这样，您可以在样式表中编写在用户事件（例如，鼠标单击）时触发的模板规则，然后样式表可以直接更新HTML页面，而无需调用Javascript。 http://www.saxonica.com/saxon-js/index.xml上的详细信息免责声明：Saxon-JS是我公司的产品。

正如迈克尔·凯（Michael Kay）所建议的那样，我使用Javascript来更新点击图片。

以下是摘要：

JavaScript

       <script type="text/javascript">
        <![CDATA[         
         function changeImage(element,type) {
            if(type == 'double'){
               element.src = element.bln ? "../img/doubleSeat.svg" : "../img/selectedSeat.svg";             
            }
            else if(type == 'regular'){
               element.src = element.bln ? "../img/regularSeat.svg" : "../img/selectedSeat.svg";
           }

            element.bln = !element.bln;  /* assigns opposite boolean value always */
           }         
        ]]>
        </script>

XSL

<xsl:for-each select='seat'>
<xsl:variable name="seatID" select="@id"/>
<xsl:choose>
    <xsl:when test=". = 'Double'">
        <img src='../img/doubleSeat.svg' name='{$rowID}{$seatID}' onclick="changeImage(this,'double')" />
    </xsl:when>

    <xsl:otherwise>
        <img src='../img/regularSeat.svg' name='{$rowID}{$seatID}' onclick="changeImage(this,'regular')" />
    </xsl:otherwise>
</xsl:choose>
</xsl:for-each>

在XSLT中单击更改图像

如何解决在XSLT中单击更改图像

解决方法

相关推荐