如何删除jQuery添加的样式属性 [英] How to remove style attribute added with jquery

问题描述

我正在使用具有某些自定义要求的devExpress表.

I am using a devExpress table with some custom requirements.

(更新)休息了一天，然后回过头来，使用React Styling正确地完成了！感谢您的建议

(UPDATE) Took a break from this for a day and went back and did it properly using React Styling! Thanks for suggestions

在屏幕截图中，我禁用了某些单元格.但是，用户希望除选定的行之外，所有单元格都看起来已禁用.

In the screenshot I have certain cells disabled. However the user wants all cells to look disabled other that the row selected.

使用此

   window
  .$("td")
  .not(document.getElementById(this.state.selection[0]))
  .not(document.getElementsByClassName(this.state.selection[0]))
  .not("td:first-child")
  .not(window.$("td:contains('iPlay')"))
  .not(window.$("td:contains('iLOE')"))
  .not(window.$("td:contains('iInvest')"))
  .not(window.$("td:contains('SPACER')"))
  .not(window.$("td:contains('$MM')"))
  .not(window.$("td:contains('$/BOE')"))
  .attr("style", "color:#868a8f");
window
  .$("td > div > div > div > input")
  .not(document.getElementsByClassName(this.state.selection[0]))
  .attr("style", "color:#868a8f");

我设法在页面加载上实现了预期的结果

I managed to achieve my desired result on page load

我的问题是，当我选择一个新行时，无法删除在未选择该行之前应用的颜色.我正在尝试使用有"查找选定的行，然后将颜色更改回继承或完全删除样式属性.

My problem is when I select a new row I cannot remove that color I applied before when it was not selected. I am trying to use "has" to find the selected row and change the color back to inherit or completely remove the style attribute.

    window
  .$("td")
  .has(document.getElementById(this.state.selection[0]))
  .has(document.getElementsByClassName(this.state.selection[0]))
  .not("td:first-child")
  .not(window.$("td:contains('iPlay')"))
  .not(window.$("td:contains('iLOE')"))
  .not(window.$("td:contains('iInvest')"))
  .not(window.$("td:contains('SPACER')"))
  .not(window.$("td:contains('$MM')"))
  .not(window.$("td:contains('$/BOE')"))
  .attr("style", "color:inherit");
window
  .$("td > div > div > div > input")
  .has(document.getElementsByClassName(this.state.selection[0]))
  .attr("style", "color:inherit");

如果有帮助，我确实有未选择的行的ID.我试图做些什么，但没有任何运气

If it helps I do have the ids of the rows that are NOT selected. I tried to do something with that but did not have any luck

  const otherRows = ExpensesUtils.ROW_PROPS.filter(x => x !== this.state.selection[0]);
for (let i = 0; i < otherRows.length; i += 1) {
  window
  .$("td")
  .has(document.getElementById(otherRows[i]))
  .has(document.getElementsByClassName(otherRows[i]))
  .attr("style", "color:inherit");
  window
  .$("td > div > div > div > input")
  .has(document.getElementById(otherRows[i]))
  .has(document.getElementsByClassName(otherRows[i]))
  .attr("style", "color:inherit");
}

链接到HTML表HTML

this.state.selection [0]是从下面的列表中选择的rowId

this.state.selection[0] is the selected rowId from the list below

我已将rowIds应用于嵌套组件中的类.我想不通另一种访问它们的方法.

I have applied the the rowIds to classes in the nested components. I could not figure out another way to access them.

  const ROW_PROPS = [
  "leaseAndWellExpense",
  "leaseAndWellExpenseBoe",
  "iloeLeaseAndWellExpense",
  "iloeLeaseAndWellExpenseBoe",
  "gnaLeaseAndWell",
  "gnaLeaseAndWellBoe",
  "transportation",
  "transportationBoe",
  "divisionGnA",
  "divisionGnABoe",
  "gatheringProcessing",
  "gatheringProcessingBoe",
  "hqGnA",
  "hqGnABoe",
  "interestExpense",
  "interestExpenseBoe",
  "netProdBoe",
  "leaseImpairments",
  "leaseImpairmentsBoe",
  "ddaProducing",
  "ddaProducingBoe",
  "iInvestDdaProducing",
  "iInvestDdaProducingBoe",
  "ddaGatheringProcessing",
  "ddaGatheringProcessingBoe",
  "iInvestDdaGatheringProcessing",
  "iInvestDdaGatheringProcessingBoe",
  "marketingCosts",
  "otherIncomeExpense",
  "otherIncomeExpenseBoe",
  "otherRevenue",
  "incomeTaxProvision",
  "incomeTaxProvisionBoe",
  "severanceTaxes",
  "severanceTaxesPercent",
  "currentTaxes",
  "currentTaxesRate",
  "netWellHeadRevenue",
];

推荐答案

最简单的方法是创建CSS规则的样式表.

The easiest way of doing this is by creating a CSS rule's stylesheet.

在该样式表中，您应该定义 2个类.

In that stylesheet, you should define 2 classes.

让我们假设1是您想要的CSS规则，另一个是默认/无规则.

Let's suppose 1 for your desired CSS rules and the other for the default/none rules.

我只是向您展示该操作的最简单版本，但具有另一个方面.

I am just showing you the simplest version of doing this thing but with another aspect.

$('#b1').on('click', function() {
  $('.c1').removeClass('c1');
  $(this).addClass('c2');
});

.c1 {
  color: red;
}

.c2 {
  color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="b1">Change</button>
<p class="c1">This is a Test Line.</p>

这篇关于如何删除jQuery添加的样式属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！