Question

我需要在WordPress评论框中插入验证图片。如果评级为1 / 5,2 / 5,3 / 5,4 / 5，则应显示未验证的图像，如果评级为5/5，则应显示验证图像。我尝试了很多版本，但如果评级大于或小于5，则能够在所有评论框中只显示一张图片。

我的代码1：

var code = $("<strong>5 / 5</strong>");
code.each(function() {
    $('p.comment-rating').prepend('<p class="prepen_img"><img src="verified.png" /></p>');
});

我的代码2：

if ($("p.comment-rating:contains('2 / 5')").length !== 0) {
    $('p.comment-rating').prepend('<p class="prepen_img"><img src="not-verified.png" /></p>');
}
else {
    $('p.comment-rating').prepend('<p class="prepen_img"><img src="verified.png" /></p>');
}

我的代码3：

$('p.comment-rating').each(function() {
    if ($("p.comment-rating:contains('5 / 5')").length !== 0) {
        $('p.comment-rating').prepend('<p class="prepen_img"><img src="not-verified.png" /></p>');
    }
    else {
        $('p.comment-rating').prepend('<p class="prepen_img"><img src="verified.png" /></p>');
    }
});

HTML：

<p class="comment-rating">
    <img src="2star.gif">
    <br>
    Rating: <strong>2 / 5</strong>
</p>

以上代码仅显示一张图片，else条件不起作用。

Answer 1

这样的事情可以起作用：

jsfiddle Demo

HTML：

<p class="comment-rating">
    Rating: <strong>2 / 5</strong>
</p>

<p class="comment-rating">
    Rating: <strong>5 / 5</strong>
</p>

<p class="comment-rating">
    Rating: <strong>1 / 5</strong>
</p>

jQuery的：

$(function() {

    $('.comment-rating').each(function() {

        var $this = $(this),
            // Finds the first number inside '.comment-rating strong' before the forward slash and converts it to a number.
            rating = parseInt( $this.find('strong').text().split('/')[0] ); 

        var verify = rating === 5 ? 'Verified' : 'Not-verified';

        $this.append('<span>'+ verify +'</span>');

    });

});

我认为文本示例会更加清晰，因为我没有这样的图像，但是图像也是如此，我稍微改变了第9行和第11行：

jsfiddle Demo

相同的HTML。

jQuery的：

$(function() {

    $('.comment-rating').each(function() {

        var $this = $(this),
            // Finds the first number inside '.comment-rating strong' before the forward slash and converts it to a number.
            rating = parseInt( $this.find('strong').text().split('/')[0] ); 

        var verify = rating === 5 ? 'http://placekitten.com/g/20/30' : 'http://placekitten.com/20/30';

        $this.append('<img src="'+ verify +'" />');

    });

});

如何在WordPress评论部分插入评级图像？

1 个答案: