更改圖像源取決於alt標記不起作用

Question

我試圖更改多個評論系統的圖像，其中單個星星從未被授予類或id。

這裏是一個什麼樣的明星評審看起來像一個例子：

<div id="rate"> 
    <span class="rating_text">Bathroom Availability</span> 
    <img alt="star_rated" src="star_rated.png"> 
    <img alt="star_rated" src="star_rated.png"> 
    <img alt="star_rated" src="star_rated.png"> 
    <img alt="star_rated_half" src="star_rated_half.png"> 
    <img alt="star_normal" src="star_normal.png"> 
</div> 
<div id="rate"> 
    <span class="rating_text">Course Level</span> 
    <img alt="star_rated" src="star_rated.png"> 
    <img alt="star_rated" src="star_rated.png"> 
    <img alt="star_rated" src="star_rated.png"> 
    <img alt="star_rated_half" src="star_rated_half.png"> 
    <img alt="star_normal" src="star_normal.png"> 
</div> 

我們的目標是讓浴室可用性圖標看起來比課程級別圖標不同，但我無法弄清楚如何改變圖片如果它不是評級明星，或者是半星的圖片。

$(document).ready(function() { 
    var PAF = $('.rating_text:contains("Bathroom Availability")').next('img'); 
    if (PAF).attr('alt') == "star_rated_half") { 
    $(PAF).addClass("testif"); 
    } 

    $(PAF).addClass("myClass"); 

}); 

變量聲明起作用，因爲它拉起了下一個圖像。我可以添加類「myClass」，但類testif不會出現。我在這裏做錯了什麼？我想要做的是改變圖片來源，但我甚至無法獲得if語句的工作，所以我一直關注這一點。

感謝您的協助。 編輯：我想爲標記導致這樣的事情

<div id="rate"> 
    <span class="rating_text">Bathroom Availability</span> 
    <img alt="star_rated" src="bath_star.png"> 
    <img alt="star_rated" src="bath_star.png"> 
    <img alt="star_rated" src="bath_star.png"> 
    <img alt="star_rated_half" src="bath_star_half.png"> 
    <img alt="star_normal" src="bath_star_empty.png"> 
</div> 
<div id="rate"> 
    <span class="rating_text">Course Level</span> 
    <img alt="star_rated" src="course_star.png"> 
    <img alt="star_rated" src="course_star.png"> 
    <img alt="star_rated" src="course_star.png"> 
    <img alt="star_rated_half" src="course_star_half.png"> 
    <img alt="star_normal" src="course_star_empty.png"> 
</div> 

Answer 1

$(document).ready(function() { 
    var PAF = $('.rating_text:contains("Bathroom Availability")').nextAll('img'); 
    if (PAF.attr('alt') == "star_rated_half") { 
    PAF.addClass("testif"); 
    } 

    PAF.addClass("myClass"); 

}); 

Answer 2

首先，ID的元素必須是唯一的，所以使用rate作爲一類值，而不是作爲一個ID。

然後嘗試

$(function() { 
    function convert(text, prefix){ 
     var $rate = $('.rate').has('.rating_text:contains("'+text+'")'); 
     $rate.find('.star_rated').attr('src', prefix+'_star.png'); 
     $rate.find('.star_rated_half').attr('src', prefix+'_star_half.png'); 
     $rate.find('.star_normal').attr('src', prefix+'_star_empty.png'); 
    } 
    convert('Bathroom Availability', 'bathroom'); 
    convert('Course Level', 'cource'); 
}); 

演示：Fiddle

Answer 3

嘗試

HTML

<div class="rate"> <span class="rating_text">Bathroom Availability</span> 
    <img alt="star_rated" src="star_rated.png" /> 
    <img alt="star_rated" src="star_rated.png" /> 
    <img alt="star_rated" src="star_rated.png" /> 
    <img alt="star_rated_half" src="star_rated_half.png" /> 
    <img alt="star_normal" src="star_normal.png" /> 
</div> 
<br /> 
<div class="rate"> <span class="rating_text">Course Level</span> 
    <img alt="star_rated" src="star_rated.png" /> 
    <img alt="star_rated" src="star_rated.png" /> 
    <img alt="star_rated" src="star_rated.png" /> 
    <img alt="star_rated_half" src="star_rated_half.png" /> 
    <img alt="star_normal" src="star_normal.png" /> 
</div> 

JS

$(".rate *:contains(Bathroom Availability)") 
    .parent() 
    .find("[alt=star_rated_half]") 
    .addClass("testif") 
    .addBack() 
    .not(".testif") 
    .addClass("myClass") 

的jsfiddle http://jsfiddle.net/guest271314/YSU4h/