0

ここの方法を使用して星評価システムを実装しようとしています: https://stackoverflow.com/a/1987545/1543310正常に機能させることができましたが、出力に合わせて調整しようとしています出力画像を簡単に変更できるようにします。

<strong>基本的に、クラスが添付されていない場合、以下のHTMLのタグの内容をターゲットにして変更する方法があるかどうか疑問に思っています.内の強力なタグ<div class="star-rating">。

HTML:

<div class="star-rating">
    <span>
        <strong class="rating">3.5</strong> 
    </span>
</div>

ここで、私がやろうとしていることでフィドルをセットアップしました: http://jsfiddle.net/AwCLm/に woocommerce html 出力が含まれています。

これは私が設定した実際の例ですが、次のようにクラスを設定する必要があります<strong>: http://jsfiddle.net/YYWQx/1/

4

4 に答える 4

1

OPを誤解したため、回答を編集しました。

クラス<strong>があるかどうかに関係なく要素をターゲットにしたい場合は、JS で使用して、CSS セレクターを変更できます。rating$('.star-rating strong').stars();

.star-rating > span strong {
    display: block;
    background: url(http://testing.wpovernight.com/wp-content/uploads/2013/03/stars.png) 0 -16px repeat-x;
    width: 80px;
    height: 16px;
}   
.star-rating > span strong > strong{
    background-position: 0 0;
}

http://jsfiddle.net/YYWQx/5/

于 2013-03-27T16:52:58.973 に答える
1

これは私があなたのために得た解決策です。

それはあなたが探していたものですか？

http://jsfiddle.net/migontech/YYWQx/6/

$.fn.stars = function() {
    return $(this).each(function() {
        // Get the value
        var val = parseFloat($(this).html());
        // Make sure that the value is in 0 - 5 range, multiply to get width
        var size = Math.max(0, (Math.min(5, val))) * 16;
        // Create stars holder
        var $span = $('<span />').width(size);
        // Replace the numerical value with stars
        $(this).html($span);
    });
}
$(function() {
    $('div.star-rating strong').stars();
});
于 2013-03-27T17:03:51.857 に答える
0

あなたのフィドルでは、動作しない直接の子をターゲットにしていますが、>代わりdiv.star-ratingに1つ以下を試してください:

これが役立つと思います：

 $('div.star-rating strong').stars();

で別のものを$('<strong />').width(size);作成するため<strong><strong.rating>

そしてcssの変更：

strong.rating, strong.rating strong {
  //-----------^^^^^^^^^^^^^^^^^^^^---------You have to include this too.
于 2013-03-27T17:04:54.217 に答える
0

何かが欠けていない限り、セレクターが機能しない理由はわかりdiv.star-rating strongません。私があなたの質問を理解している場合<div class='star-rating'>は、常に存在します。ネストされたクラスにクラスがあるかどうかがわからないだけです<strong>。この更新されたフィドルでは、星の評価が更新されたようです。

http://jsfiddle.net/AwCLm/6/

于 2013-03-27T17:07:48.547 に答える