Question

我试图更改多个评论系统的图像，其中个别明星从未获得过课程或身份。

以下是星级评论的示例：

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

目标是让浴室可用性图标看起来与课程级别图标不同，但如果图像不是评级星级或图像不同，我无法弄清楚如何更改图像＃39;半个星。

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

});

变量声明起作用，因为它会拉出下一个图像。我能够添加类＆＃34; myClass＆＃34;，但是类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/

根据alt标记无法更改图像源

3 个答案: