从标签标签中获取文本

Question

我目前正在研究从 1 到 5 的一些星级。如果您按 3 颗星，您将在下面的 <p> 标签中收到消息 "Decent - 3/5"。我如何从 label 标签中获取标题消息，并且无论何时按下另一个星号值，是否都会更改文本？

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

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" 属性。也许你应该在最后只使用一个标签。

<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>

从标签标签中获取文本

Getting text from label tag

html

label

rating