Question

我不明白为什么输出与我在网站上看到的不同（http://dabblet.com/gist/1722368）任何人都可以帮助我吗？请。尝试通过xslt / xml在页面中创建多个评级系统。

这是我的xslt代码：

 <div class="rating">
                <xsl:element name="input">
                  <xsl:attribute name="type">radio</xsl:attribute>
                  <xsl:attribute name="value">5</xsl:attribute>
                  <xsl:attribute name="name">myrating</xsl:attribute>
                </xsl:element>
                <label>☆</label>

                <xsl:element name="input">
                  <xsl:attribute name="type">radio</xsl:attribute>
                  <xsl:attribute name="value">4</xsl:attribute>
                  <xsl:attribute name="name">myrating</xsl:attribute>
                </xsl:element>
                <label>☆</label>
                <xsl:element name="input">
                  <xsl:attribute name="type">radio</xsl:attribute>
                  <xsl:attribute name="value">3</xsl:attribute>
                  <xsl:attribute name="name">myrating</xsl:attribute>
                </xsl:element>
                <label>☆</label>
                <xsl:element name="input">
                  <xsl:attribute name="type">radio</xsl:attribute>
                  <xsl:attribute name="value">2</xsl:attribute>
                  <xsl:attribute name="name">myrating</xsl:attribute>
                </xsl:element>
                <label>☆</label>
                <xsl:element name="input">
                  <xsl:attribute name="type">radio</xsl:attribute>
                  <xsl:attribute name="value">1</xsl:attribute>
                  <xsl:attribute name="name">myrating</xsl:attribute>
                </xsl:element>
                <label>☆</label>
              </div>

我的css代码：

 .rating {
    unicode-bidi: bidi-override;
    direction: rtl;
    text-align: center;

    }
    .rating > label{
    display: inline-block;
    position: relative;
    width: 1.1em;
    }
    .rating > *:hover,
    .rating > *:hover ~ label,
    .rating:not(:hover) > input:checked ~ label{
    color: transparent;
    }
    .rating > *:hover:before,
    .rating > *:hover ~ label:before,
    .rating:not(:hover) > input:checked ~ label:before {
    content: "\2605";

    left: 0;
    color: gold;
    }

    .rating > input {
    margin-left:-1.1em;
    margin-right:0;
    top:3px;
    width:1.1em;
    height:1.1em;
    position:relative;
    z-index:2;
    opacity:0;
    }

Answer 1

整个事情与XSLT无关。

我看到您更改了原始页面，将 span 标记替换为标签。

显然你忘了，标签标签必须有 for 属性值等于与其连接的输入标记的 id 。

因此，我将 id 属性添加到输入标记，将属性属性标记标记添加到标记标记，并且它可以正常工作。

检查jsfiddle（6to6zfw2）的工作示例。

评级系统无法正确显示

1 个答案: