Question

我的客户需要快速更新，他们使用woocommerce并在其产品中添加评级属性，

目前已设置，因此您可以选择评级（1-5），并且当前将其输出为段落文本，即<p>1</p>

是否可以使用jquery，因此它可以根据内容替换文本内容，例如，如果内容为＆＃34; 1＆＃34;它用1星的图像替换它，但如果内容是＆＃34; 2＆＃34;它加载2星等图像？

我试图在没有对核心woocommerce php进行太多更改的情况下更新此内容，虽然我已经更新了它，以便段落所在的表行有一个类，所以：

<tr class="rating">
<th>rating</th>
<td><p>1</p></td>
</tr>

我认为是我使用jquery来改变段落上的CSS样式，以便它使用相关的星形图像作为段落背景，显示块，并缩进文本以便无法看到，但是它是可能有这些样式（特别是背景）取决于段落中的实际文本内容？

非常感谢提前！

Answer 1

$(document).ready(function(){
$('tr.rating').each(function(){
   $(this).find('p').html('<img src="yourimagesfolder/'+($(this).find('p').text()+'.jpg'" />');
   //make sure to have 1.jpg,2.jpg..etc in your images folder   

    });

});

Answer 2

是的，你肯定可以拥有段落的背景。但是你可以使用一些其他元素，比如div，并为该div设置一些高度和宽度。根据该div中的内容，您可以获取背景图像并隐藏内容。

Answer 3

$($('#yourTableId tr.rating').each(
    function(){
        var $t = $(this), $p = $t.find('td > p');
        if($p.length){
            $p.addClass($p.text() + 'bg'); // 1bg.jpg ...
            // make sure to create associated classes
        }
    }
));

使用jquery交换图像的段落内容

3 个答案: