Question

我目前正在处理从1到5的一些评级星。如果按3星，您将收到消息“Decent - 3/5”，例如下面的Apache标签。如何从标签标签中获取标题消息，无论如何，只要按下另一个星号值，文本就会发生变化？

<p>

Answer 1

这是一个例子：

  <div>
    <fieldset class="rating">
        <!-- 5 Stars -->
        <input type="radio" id="stars5" name="rating" value="5" onclick="processLabel( this );" /><label class="full" for="star5" title="Awesome - 5/5"></label>
        <!-- 4 Stars -->
        <input type="radio" id="star4" name="rating" value="4" onclick="processLabel( this )"/><label class = "full" for="star4" title="Pretty good - 4/5"></label>
        <!-- 3 Stars -->
        <input type="radio" id="star3" name="rating" value="3"  onclick="processLabel( this )" /><label class = "full" for="star3" title="Decent - 3/5"></label>
        <!-- 2 Stars -->
        <input type="radio" id="star2" name="rating" value="2"  onclick="processLabel( this )"/><label class = "full" for="star2" title="Would not play again - 2/5"></label>
        <!-- 1 Star -->
        <input type="radio" id="star1" name="rating" value="1"  onclick="processLabel( this )" /><label class = "full" for="star1" title="Complete garbage - 1/5"></label>
    </fieldset>
   </div>

<script>
    function processLabel( radio ) {
       var label = $( '[for=star' + radio.value + ']');
       label.html( $( label ).attr( 'title' ) );
       //label.html( '<p>' + $( label ).attr( 'title' ) + '</p>');
    }
</script>

但是你为什么要使用所谓的属性？而不是身份证？如果你使用id是一种简单而且更好的方法。

Answer 2

有一些丑陋的非jQuery解决方案。您应该使用ID而不是“for”attributtes。也许你最后应该只使用一个标签。

<div>
<fieldset class="rating">
    <!-- 5 Stars -->
    <input type="radio" id="star5" name="rating" value="5" onclick="processLabel( this );" /><label class="full" id="label5" title="Awesome - 5/5"></label>
    <!-- 4 Stars -->
    <input type="radio" id="star4" name="rating" value="4" onclick="processLabel( this )"/><label class = "full" id="label4" title="Pretty good - 4/5"></label>
    <!-- 3 Stars -->
    <input type="radio" id="star3" name="rating" value="3"  onclick="processLabel( this )" /><label class = "full" id="label3" title="Decent - 3/5"></label>
    <!-- 2 Stars -->
    <input type="radio" id="star2" name="rating" value="2"  onclick="processLabel( this )"/><label class = "full" id="label2" title="Would not play again - 2/5"></label>
    <!-- 1 Star -->
    <input type="radio" id="star1" name="rating" value="1"  onclick="processLabel( this )" /><label class = "full" id="label1" title="Complete garbage - 1/5"></label>
</fieldset>

<script>
function processLabel( radio ) {
   resetLabels();
   var label = document.getElementById("label" + radio.getAttribute('value'))
   label.innerHTML = label.getAttribute( 'title' ) ;
}

function resetLabels() {
    document.getElementById("label1").innerHTML = "";
    document.getElementById("label2").innerHTML = "";
    document.getElementById("label3").innerHTML = "";
    document.getElementById("label4").innerHTML = "";
    document.getElementById("label5").innerHTML = "";
   }
</script>

编辑：也许我理解错了。有第二种解决方案：

<div>
<fieldset class="rating">
    <!-- 5 Stars -->
    <input type="radio" id="star5" name="rating" value="5" onclick="processLabel( this );" /><label class="full" id="label5" title="Awesome - 5/5"></label>
    <!-- 4 Stars -->
    <input type="radio" id="star4" name="rating" value="4" onclick="processLabel( this )"/><label class = "full" id="label4" title="Pretty good - 4/5"></label>
    <!-- 3 Stars -->
    <input type="radio" id="star3" name="rating" value="3"  onclick="processLabel( this )" /><label class = "full" id="label3" title="Decent - 3/5"></label>
    <!-- 2 Stars -->
    <input type="radio" id="star2" name="rating" value="2"  onclick="processLabel( this )"/><label class = "full" id="label2" title="Would not play again - 2/5"></label>
    <!-- 1 Star -->
    <input type="radio" id="star1" name="rating" value="1"  onclick="processLabel( this )" /><label class = "full" id="label1" title="Complete garbage - 1/5"></label>
</fieldset>
<p id="labelTitle">

</p>

<script>
function processLabel( radio ) {
   var label = document.getElementById("label" + radio.getAttribute('value'))
   document.getElementById("labelTitle").innerHTML = label.getAttribute( 'title' ) ;
}
</script>

从标签标签获取文本

2 个答案: