xml - 在 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 是我公司的产品。
推荐阅读
- wordpress - 如何在 Bitnami 中恢复 Apache 配置文件
- node.js - 无法在 heroku 上进行 GET / MERN 堆栈部署
- angular - 生产模式下的 Ngx Quill 错误:未捕获(承诺中):TypeError:ne 不是函数
- c++ - 如何通过 FetchContent 将 Eigen 库添加到 cmake c++ 项目
- java - Vaadin 14 - 文本字段未正确显示枚举
- css - Rails 6 未在开发中获取样式表更改
- c# - CLR 如何从程序集中加载文件?
- reactjs - ReactDataGrid 未正确显示行
- microsoft-teams - 如何使用 c# 代码删除 MSteams 中发布的自适应消息
- python - Discordpy 定时消息或禁令或角色,机器人重启 | 不和谐