jquery 如何动态添加、删除class样式

Posted 2023-04-24

参考技术A 例如使用attr()方法来获取p元素的class，JQuery代码如下:var
p_class
=
$("p").attr("class");
//获取p元素的class使用attr()方法来设置p元素的class，JQuery代码如下:1
$("p").attr("'class",
"high");
//设置p元素的class为
"high"
在大多数情况下，它是将原来的class替换为新的class，而不是在原来的基础上追加新的class。追加样式
什么是追加class呢?假如p元素原本的class为myClass，那么追加一个名叫high的class后，class属性变为
“myClass
high”，即myClass和high两种样式的叠加。JQuery提供了专门的addClass()方法来追加样式。为了使例子更容易理解，首先在
style标签里添加另一组样式:1
.high
color:red;

2
.another
font-style:italic;
color:blue;

然后在网页中添加一个“追加class类”的按钮，按钮的事件代码如下:1
$("#btn_3").click(function()
2
$("#nm_p").addClass("another");
//
追加样式
3
);
最后当单击“追加class类”按钮时，p元素样式就会变为斜体，而先前的红色字体也会变为蓝色。此时p元素同时拥有两个class值，即"high"和"another"。在CSS中有以下两条规定。1.如果给一个元素添加了多个class值，那么就相当于合并了它们的样式。
2.如果有不同的class设定了同一样式属性，则后者覆盖前者。
在上例中，相当于给p元素添加了如下样式:1
color
:
red;
/*
字体颜色设置红色*/
2
font-style:italic;
3
color:blue;
在以上的样式中，存在两个“color”属性，而后面的“color”属性会覆盖前面的“color”属性，因此最终的“color”属性的值为“blue”，而不是“red”。移除样式
如果用户单击某个按钮时，要删除class的某个值，那么可以使用与addClass()方法相反的removeClass()方法来完成，它的
作用是从匹配的元素中删除全部或者指定的class。例如可以使用如下的JQuery代码来删除p元素中值为“high”的class:1
$("p").removeClass("high");
//移除p元素中值为"high"的class
如果要把p元素的两个class都删除，就要使用两次removeClass()方法，代码如下:1
$("p").removeClass("high").removeClass("another");
JQuery提供了更简单的方法。可以以空格的方式删除多个class名，代码如下:1
$("p").removeClass("high
another");
另外，还可以利用removeClass()方法的一个特性来完成同样的效果。当它不带参数时，就会将class的值全部删除，JQuery代码如下:1
$("p").removeClass();
//移除p元素的所有class
切换样式
JQuery中有一个方法toggle()，JQuery代码如下:
1
toggleBtn.toggle(function()
2
//元素显示
代码③
3
,
function()
4
//元素隐藏
代码④
5
)
toggle()方法此处的作用是交替执行代码③和代码④两个函数，如果元素原来是显示的，则隐藏它:如果元素原来是隐藏的，则显示它。此时，toggle()方法主要是控制行为上的重复切换。另外JQuery还提供了一个toggleClass()方法控制样式上的重复切换。如果类名存在则删除它，如果类名不存在则添加它。例如对p元素进行toggleClass()方法操作。1
$("p").toggleClass("another");
//重复切换类名“another”
当不断单击“切换样式”按钮时，p元素的class的值就会在“myClass”和“myClass
another”之间重复切换。判断是否含有某个样式
hasClass()可以用来判断元素中是甭含有某个class，如果有，则返回true，否则返回false。例如可以使用下面的代码来判断p元素中是否含有“another”的class:1
$("p").hasClass("another");
这个方法是为了增强代码可读性面产生的。

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

【中文标题】如何删除使用 jquery 添加的样式属性

【英文标题】：How to remove style attribute added with 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。他们的编码方法非常非常不同。

【参考方案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");

)