首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >jQuery在每个if else语句中添加不同的类

jQuery在每个if else语句中添加不同的类
EN

Stack Overflow用户
提问于 2017-06-29 15:30:40
回答 5查看 45关注 0票数 1

我很难让jQuery为每个数据值分配正确的类。

如果td .FuelInjectorQty的值小于3,则应该将类.FiJlowQty添加到父tr.FuelInjectorRow中。

如果td .FuelInjectorQty大于或等于3,则应该将类.FiJhiQty添加到父tr.FuelInjectorRow中。

代码语言:javascript
运行
复制
if ($('.FuelInjectorQty').data('value') < 3) {
  $('.FuelInjectorRow').addClass("FiJlowQty");
} else if ($('.FuelInjectorQty').data('value') >= 3) {
  $('.FuelInjectorRow').addClass("FiJhiQty");
}

我有一半的工作,在那里它适用于一个或另一个,但不会再这样做第二次发生。我觉得我需要一个循环或什么的,所以我尝试了每一个(),但无法使它工作。

代码语言:javascript
运行
复制
   $('.FuelInjectorRow').each(function(i) {
    if ($('.FuelInjectorQty').data('value') < 3) {
      $('.FuelInjectorRow').addClass("FiJlowQty");
    } else if ($('.FuelInjectorQty').data('value') >= 3) {
      $('.FuelInjectorRow').addClass("FiJhiQty");
    }
  });

见Fiddle:https://jsfiddle.net/bpo29/tmbp67nL/85/

谢谢你的指点&救命!

EN

Stack Overflow用户

发布于 2017-06-29 15:45:52

您必须针对要向其中添加类的tr,然后使用.addClass( function ),其中函数返回要添加到tr元素的适当类。

代码语言:javascript
运行
复制
$('.FuelInjectorRow').addClass( function() {
    return +$(this).find('.FuelInjectorQty').data('value') < 3 ? 'FiJlowQty' : 'FiJhiQty';
} );

代码语言:javascript
运行
复制
$(function() {
    $('.FuelInjectorRow').addClass( function() {
        return +$(this).find('.FuelInjectorQty').data('value') < 3 ? 'FiJlowQty' : 'FiJhiQty';
    } );
});
代码语言:javascript
运行
复制
/*  Uploads Grid */

#UploadGrid {
  font-size: 10px;
  display: block;
  width: 238px;
  float: left;
}

#UploadGrid table {
  margin: 0px;
  width: auto;
  text-align: center;
  margin-bottom: 15px;
}

#UploadGrid td {
  padding: 0;
  height: 15px;
  border-bottom: 1px solid #000;
}

td.DocUploadTitle {
  text-align: left;
  font-weight: bold;
  font-size: 12px;
  background-color: black !important;
  color: white;
  height: 35px !important;
  text-transform: uppercase;
  text-indent: 2em;
  padding-top: 4px !important;
}

.DocUploadGridHeader {
  text-align: center;
  font-weight: bold;
  height: 30px;
}

.DNCol {
  width: 70px
}

.DDCol {
  width: 65px
}

.PNCol {
  width: 78px
}

.QCol {
  width: 25px
}

#UploadGrid table td:nth-child(odd) {
  background: #e0e0e0
}

/*
.FuelInjectorRow td {background: #f1b5b5 !important} 
*/

.FiJlowQty td {
  background: #f1b5b5 !important
}


.FiJhiQty td {
  background: #8fe28f !important
}

.FiJlowNote {
  padding: 10px;
  margin-bottom: 15px;
  text-align: center;
  font-size: 11px;
  line-height: 14px;
  background-color: #f1b5b5;
}

.FiJhiNote {
  padding: 10px;
  margin-bottom: 15px;
  text-align: center;
  font-size: 11px;
  line-height: 14px;
  background-color: #8fe28f;
}
代码语言:javascript
运行
复制
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="UploadGrid">
  <table width="100%" cellpadding="0" cellspacing="0" style="">
    <thead>
      <tr>
        <td colspan="4" class="DocUploadTitle">Your Uploaded Documents</td>
      </tr>
      <tr class="DocUploadGridHeader">
        <td class="DNCol">Document
          <br>Number</td>
        <td class="DDCol">Document
          <br>Date</td>
        <td class="PNCol">Part
          <br>Number</td>
        <td class="QCol">Qty.</td>
      </tr>
    </thead>
    <tbody>
      <tr class="NotFuelInjector">
        <td>1111</td>
        <td>1/1/2017</td>
        <td class="">120181C92R</td>
        <td class="" data-value="5">5</td>
      </tr>

      <tr class="FuelInjectorRow">
        <td>Should Be Red</td>
        <td>3/1/2017</td>
        <td class="FuelInjectorCell">288865A1R</td>
        <td class="FuelInjectorQty" data-value="2">2</td>
      </tr>

      <tr class="NotFuelInjector">
        <td>21313</td>
        <td>4/1/2017</td>
        <td class="">1315328C4R</td>
        <td class="" data-value="1">1</td>
      </tr>
      <tr class="NotFuelInjector">
        <td>213212</td>
        <td>5/1/2017</td>
        <td class="">1315328C4R</td>
        <td class="" data-value="1">1</td>
      </tr>
      <tr class="FuelInjectorRow">
        <td>Shouldnt Be Red</td>
        <td>6/14/2017</td>
        <td class="FuelInjectorCell">JR908507</td>
        <td class="FuelInjectorQty" data-value="4">4</td>
      </tr>

    </tbody>
  </table>

  <div class='FiJlowNote'>The red highlighted row(s) are Fuel Injectors that progress will not be awarded for.
    <br> You must install Fuel Injectors in quantities of 3 or more to recieve progress.</div>

  <div class='FiJhiNote'>The green highlighted row(s) are Fuel Injectors that progress WILL be awarded for.
    <br> You have installed Fuel Injectors in quantities of 3 or more.</div>

</div>

票数 2
EN
查看全部 5 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/44829383

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档