我不能正确使用JQuery的hasClass函数

Question

我有两行，我想使用jquery的hasClass。如果subjFull类有红色的类，它显示progressText。如果subjFull有绿色类，它显示progressTextNone。但是这个脚本不起作用。我该怎么修理它?

 <tr class="cart-item-row">                         
   <div class="subjFull green"><a href="#">First</a></div>                                                            
   <div class="progressText">Minimum Price</div>
   <div class="progressTextNone">Max Price</div>                           
 </tr>
 <tr class="cart-item-row">                         
   <div class="subjFull red"><a href="#">Second</a></div>                                                            
   <div class="progressText">Minimum Price</div>
   <div class="progressTextNone">Max Price</div>                           
 </tr>
<script type="text/javascript">
if ($(".subjFull").hasClass("red")) {
   $(".progressText").show();
   $(".progressTextNone").hide();
 }
  else if ($(".subjFull").hasClass("green")) {
    $(".progressTextNone").show();
    $(".progressText").hide();
 }
<script>

Answer 1

使用.each()来迭代$(".subjFull")，然后在当前元素的上下文中执行代码

你的HTML也是无效的。tr只能有td或th作为其子

允许的内容:0个或多个<td>或<th>元素，或它们的组合

用td像

一样把div括起来

<tr class="cart-item-row">
    <td>
          <div class="subjFull green"><a href="#">First</a>
          </div>
          <div class="progressText">Minimum Price</div>
          <div class="progressTextNone">Max Price</div>
    </td>
</tr>

$(function() {
  $(".subjFull").each(function() {
    var _this = $(this);
    var parent = _this.parent();
    if (_this.hasClass("red")) {
      parent.find(".progressText").show();
      parent.find(".progressTextNone").hide();
    }
    if (_this.hasClass("green")) {
      parent.find(".progressTextNone").show();
      parent.find(".progressText").hide();
    }
  });
});

.red {
  color: red;
}
.green {
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr class="cart-item-row">
    <td>
      <div class="subjFull green"><a href="#">First</a>
      </div>
      <div class="progressText">Minimum Price</div>
      <div class="progressTextNone">Max Price</div>
    </td>
  </tr>
  <tr class="cart-item-row">
    <td>
      <div class="subjFull red"><a href="#">Second</a>
      </div>
      <div class="progressText">Minimum Price</div>
      <div class="progressTextNone">Max Price</div>
    </td>
  </tr>
</table>

Answer 2

<script type="text/javascript">
$(document).ready(function(){
    if ($(".subjFull").hasClass("red")) {
       $(".progressText").show();
       $(".progressTextNone").hide();
     }
      else if ($(".subjFull").hasClass("green")) {
        $(".progressTextNone").show();
        $(".progressText").hide();
     }
});
<script>