Question

I am trying to get my star rater to keep the background position of the sprite I m using when clicking one of the 5 table columns inside a container div. On mouseover I m adding a style attribute to do it and that works, but when I click and add a class with the same exact css in it it doesn t effect the background position. I ve added the class by default and it still doesn t work. I guess this is really more of a css question than anything else.

Here is the code I m using: http://jsfiddle.net/cbYCZ/3/

非常感谢任何帮助。这对我来说是一个真正的 no子。

Answer 1

阁下:

#rating 
{
   background: ...;
}

之后,该规则:

.star3
{
   background: ...;
}

这两项文书同时适用于同一要素,但由于,其中一项带有“id”(#ating)的编码高于一个类别(.star3 ),因此添加了一个编码<>.stat3/对所提供的网页没有任何影响。

Changing star3  to #ating.star3  fixes the problem: http://jsfiddle.net/gLTSz/。

Answer 2

页: 1

参看。

它带来了希望。

Answer 3


It is difficult to see exactly what is going on as your image resource (removed image path) requires authentication.

然而,我可以看到,你没有真正使用 j皮,因为它的目的是:

为取消班级,请使用<代码>。

添加和删除风格时有<条码>cs()。

添加和删除数值时有<条码>。

湿法/湿法中,有<条码>。

首先,我要改变这些问题,看问题是否继续存在。否则,你将需要将星体描绘成某个地方的公众,以便我们能够看到你的代码。

Answer 4

这里的解决办法远比你大笑。你可能发现,它以实际方式向你们教授许多更先进的技术。

我对《守则》作了相当广泛的评论。让我知道,你是否有任何问题。

请注意,我的解决办法取决于@Abhi Beckert的关键观察,因此他应当获得接受的答复荣誉。

守则载于:。 http://jsfiddle.net/GtPnr/4/。

And here is the new HTML:

<div id="rating">
    <table>
        <tr>
            <td><div id="1star" data-stars="1"></div></td>
            <td><div id="2star" data-stars="2"></div></td>
            <td><div id="3star" data-stars="3"></div></td>
            <td><div id="4star" data-stars="4"></div></td>
            <td><div id="5star" data-stars="5"></div></td>
        </tr>
    </table>
</div>
<input type="hidden" id="stars" />

我的之三者,但评论说, Java文:

// store re-used jQuery objects in variables to greatly improve performance.
// this avoids re-creating the same jQuery object every time it is used.
var $rating = $( #rating );
var $starsField = $( #stars );
// use the .hover() as a shortcut for  mouseover  and  mouseout  handlers.
$rating.find( td ).hover(function() {
    // remove all star classes then dynamically construct class name to add
    // using the data method to retrieve the value stored in the "data-stars" attribute
    // I added.
    $rating.removeClass( star1 star2 star3 star4 star5 ).addClass( star  + $(this).find( div ).first().data( stars ));
}, function() {
    // this is the mouse-out handler. Remove all star classes
    $rating.removeClass( star1 star2 star3 star4 star5 );
    // if the current value in the hidden field is set, then assign the correct class
    // so the star s clicked value is respected.
    var curVal = $starsField.val() || 0;
    if (curVal > 0) {
        $rating.addClass( star  + curVal);
    }
}).click(function() {
    // when clicking a star, store the value in the hidden input
    $starsField.val($(this).find( div ).first().data( stars ));
});

友情链接