javascript - 我无法正确使用 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作为它的 child

Permitted content: Zero or more <td> or <th> elements, or a mix of them

所以用 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>