交換段落內容使用jQuery

我有一個客戶是誰需要一個快速更新，他們使用woocommerce，並添加評級屬性，把自己的產品形象，交換段落內容使用jQuery

目前的設置，使您可以選擇一個等級（1 5），它當前輸出的段落文本，即<p>1</p>

是否有可能與jquery，以便它取代文本內容與圖像，依賴於內容，例如，如果內容是「1」它用1星形的圖像代替它，但如果內容是「2」，它會加載一個2星形的圖像等？

在嘗試，而無需對核心woocommerce PHP太多的變化來更新這個，雖然我已經更新它，以便該段位於內有一個類，所以錶行：

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

我將假定我使用jQuery來改變段落上的css樣式，以便它使用相關的星形圖像作爲段落背景，顯示塊，並縮進文本以使其不能被看到，但有可能具有這些樣式（特別是背景）取決於段落中的實際文本內容？

非常感謝提前！

來源

2012-09-14 Dan Barter

已經寫了很多[JQuery星級評級插件]（https://www.google.co.uk/search?q=jquery+rating）。我建議使用其中之一。 –

$(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 

    }); 

});

來源

2012-09-14 08:55:50 coolguy

是的，你肯定可以有段落的背景。但是你可以使用一些其他元素，如div，併爲該div設置一些高度和寬度。根據該div中的內容，您可以獲取背景圖片並隱藏內容。

來源

2012-09-14 08:56:33 mohanrajt

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

來源

2012-09-14 08:59:28 Stphane

交換段落內容使用jQuery

回答

相關問題