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>

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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>

我无法正确使用JQuery hasClass函数

2 个答案: