0

シンプルな 5 つ星投票システムを作成しており、href 要素の数値を取得しようとしています。HTML はうまく機能しますが、クリック イベントの数値を取得する方法がわかりません。

HTML は次のようになります。

<div id="voting"> 
    <span class="rating_container"> 
        <span class="star_container">  
            <a href="#" class="star star_1" >1<span class="rating">Terrible</span></a>   
            <a href="#" class="star star_2" >2<span class="rating">Bad</span></a>
            <a href="#" class="star star_3" >3<span class="rating">OK</span></a>
            <a href="#" class="star star_4" >4<span class="rating">Good</span></a>   
            <a href="#" class="star star_5" >5<span class="rating">Great</span></a>   
        </span> 
    </span> 
</div>

私のjQueryクリックイベントは次のようになります:

$('.star').click(function(e) {
    e.preventDefault();

   // How can I get the numeric value of the clicked star (e.g., 5,6,7 etc)

});
4

2 に答える 2

5

これを行う：

var n = this.firstChild.data;

またはこれ：

var n = this.className.split("_")[1];

文字列から数値に変換する必要がある場合は、これを追加します。

n = parseInt(n, 10);
于 2012-11-19T22:05:09.810 に答える
4

私は使用しますdata-tag。

<div id="voting"> 
    <span class="rating_container"> 
        <span class="star_container">  
            <a href="#" data-val="1" class="star star_1" >1<span class="rating">Terrible</span></a>   
            <a href="#" data-val="2" class="star star_2" >2<span class="rating">Bad</span></a>
            <a href="#" data-val="3" class="star star_3" >3<span class="rating">OK</span></a>
            <a href="#" data-val="4" class="star star_4" >4<span class="rating">Good</span></a>   
            <a href="#" data-val="5" class="star star_5" >5<span class="rating">Great</span></a>   
        </span> 
    </span> 
</div>

そして、私のクリックハンドラーで、

$('.star').click(function(e) {
    e.preventDefault();
   $(this).data('val'); //should return you the number
});
于 2012-11-19T22:06:13.617 に答える