Question

我正在尝试使用此处的方法实施星级评分系统：https://stackoverflow.com/a/1987545/1543310我已经能够让它成功运作但我正在尝试将其定制为woocommerce星级的输出系统，所以我可以很容易地改变输出的图像。

基本上我想知道是否有一种方法可以在下面的html中定位和更改<strong>标签的内容，如果没有附加类，因为还有其他一些关于以下内容的演绎输出，但它们都包含<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/

Answer 1

编辑我的答案，因为我误解了OP。

如果您的意思是想要定位<strong>元素而不管它是否具有rating类，您可以在JS中使用$('.star-rating strong').stars();，并修改CSS选择器：

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

Answer 2

这是我得到的解决方案。

那是你在找什么？

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();
});

Answer 3

在你的小提琴中，你已经定位了>的{{1}}的直接孩子div.star-rating而不是你的工作，而是在下面尝试一下：

我认为这可以帮到你：

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

因为$('<strong />').width(size);在<strong>

中创建了另一个<strong.rating>

和css的变化：

strong.rating, strong.rating strong {
  //-----------^^^^^^^^^^^^^^^^^^^^---------You have to include this too.

Answer 4

除非我遗漏某些内容，否则我不明白为什么选择器div.star-rating strong不起作用。如果我理解您的问题，<div class='star-rating'>始终存在，您只是不知道嵌套的<strong>是否会有一个类。在这个更新的小提琴中，星级似乎已经更新。

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

如何使用jquery来定位嵌套的strong

4 个答案: