javascript - 根据 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>

目标是让浴室可用性图标看起来与类(class)级别图标不同，但我不知道如何更改图像(如果不是星级)或不同的图像(如果是半星)。

$(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" );

});