如何删除使用 jquery 添加的样式属性答案

【问题标题】：How to remove style attribute added with jquery如何删除使用 jquery 添加的样式属性
【发布时间】：2021-04-22 20:19:18
【问题描述】：

我正在使用带有一些自定义要求的 devExpress 表。

（更新）休息了一天，然后返回并使用 React 样式正确地完成了它！感谢您的建议

在屏幕截图中，我禁用了某些单元格。但是，用户希望所有单元格看起来都被禁用，而不是选中的行。

使用这个

   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");

我设法在页面加载时达到了我想要的结果

我的问题是当我选择一个新行时，我无法删除之前未选择时应用的颜色。我正在尝试使用“has”来查找选定的行并将颜色更改回继承或完全删除样式属性。

    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。我试图用它做点什么，但没有任何运气

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

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

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

  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",
];

【问题讨论】：

您能否添加（部分）HTML，以便我们知道如何处理。见Minimal, Reproducible Example
这是可怕的 JS。为什么要在 $ 上加上 window 前缀？为什么要混合使用 DOM 和 jQuery？我什至无法猜测.has(document.getElementById(this.state.selection[0])) 应该做什么？ td 是否包含 ID = this.state.selection[0] 的元素？？？这与$('#'+this.state.selection[0]) 相同，然后我们可以过滤东西而不是使用不包含。如果我只知道this.state.selection[0] 实际做了什么
@epascarello 是的，我不熟悉 jquery，我有一个截止日期！
你应该在 CSS 中创建一个样式表规则并添加一个类。删除一个类要容易得多。
我不会真正混合使用 ReactJS 和 jQuery。他们的编码方法非常非常不同。

标签： javascript html jquery css

【解决方案1】：

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

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

假设 1 用于您想要的 CSS 规则，另一个用于默认/无规则。

我只是向你展示了做这件事的最简单的版本，但有另一个方面。

$('#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>

【讨论】：

【解决方案2】：

最简单的方法是

 $('#idName').on('click', function()
{
    $('.className').removeClass('removeClassName');
    $(this).addClass('addClassName');
});

上面的代码表示当点击id为IdName的按钮时，className的元素会移除removeClassName的类，并添加addClassName的类。

如需进一步说明，您可以查看Removing CSS Using JQuery Documentation

【讨论】：

【解决方案3】：

还有另一种方法可以实现它。而不是使用样式属性，因为它需要最高的特异性，所以在某个地方它可能会产生问题。取而代之的是，您可以使用toggleClass。首先将您的默认样式添加到表格中，每当您单击任何行时，您都可以使用切换类 Toggle Class Example

示例。

$("td > div > div > div").click(function(){
  $("input").toggleClass("main");

})

【讨论】：