我無法正確使用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

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

Answer 2

使用.each()迭代的$(".subjFull")那麼在當前元素

而且你的HTML是無效的上下文中執行代碼。 tr只能有td或th作爲其子

許可內容：零個或多個<td>或<th>元素，或者是它們的組合

所以與td像

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

包裝您的div

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