我無法正確使用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作為其子級

允許的內容：零個或多個<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>