使用 Jquery 在 Html 类标签上添加 Css答案

【问题标题】：Add Css on a Html Class Tag With Jquery使用 Jquery 在 Html 类标签上添加 Css
【发布时间】：2015-06-01 12:15:31
【问题描述】：

我有一个提交按钮，默认情况下它具有红色的 CSS 样式。如何在不使用 jquery 刷新页面的情况下动态应用 css 样式并查看结果？

我有一个 oncheck 查询，我想将更改样式的代码放在返回 true 之上；

我的按钮

<input type="submit" name="submit" id="submitForm" class="btn btn-primary-alt" value="Submit" onsubmit="return validate_age();" />

我想在提交按钮上应用的 css 样式

.btn-primary-alt:hover {
background-color: #3b8410;
border-bottom: 3px solid #2a620a;
border-color: #2a620a;
color: #fff;
}

我的 jquery

if($("#age_18").is(":checked"))
{ 
  // This is where I want the css styling will happen.
  return true;
}
else
{
  alert("You must be above 18 years of age.");
  return false;
}

所以基本上当我的复选框被选中时，我想在我的提交按钮上添加一个 CSS 样式。谢谢

【问题讨论】：

如果您在下一行return true，页面将在更改的 CSS 可见之前转到新页面。您是否希望阻止页面重新加载以及样式复选框；或者您是否希望更改后的 CSS 可见并然后重新加载页面（或转到下一页等...）？
在单选按钮更改时执行此操作。您正在尝试的内容（假设为 document.ready）只会在页面加载期间或提交页面时触发。

标签： jquery css arrays stylesheet

【解决方案1】：

你可以像这样声明你的CSS

.btn-primary-alt-hover,.btn-primary-alt:hover {
   background-color: #3b8410;
   border-bottom: 3px solid #2a620a;
   border-color: #2a620a;
   color: #fff;
}

然后你可以像这样在你的按钮上应用它

$("#submitForm").addClass('btn-primary-alt-hover');

【讨论】：

【解决方案2】：

最好的解决方案是创建一个新类（不是 :hover）。比如

.checked{
 background-color: #3b8410;
 border-bottom: 3px solid #2a620a;
 border-color: #2a620a;
 color: #fff;
}

然后使用jQuery添加或删除类。

$('#submitForm').addClass('checked');

和

$('#submitForm').removeClass('checked');

【讨论】：

哇。这正是我所需要的。我稍后将做同样的事情，如果用户取消选中该框，则删除该类。感谢您的所有帮助。我希望我可以勾选你所有的答案，但我只需要选择一个：D

【解决方案3】：

$("#age_18").change(function(){
  if($("#age_18").is(":checked")) {
    // Add Your Styling Here to Submit Button...
    return true;
  } else {
    alert("You must be above 18 years of age.");
    return false;
  }
})

你的逻辑是完美的只有一件事。

你必须调用它的更改函数来检查复选框是否被选中..

【讨论】：

【解决方案4】：

无论如何，我都会让样式远离 CSS，就像您在单独的 CSS 文件中一样。

我会从以下位置扩展您的 CSS： .btn-primary-alt:hover 到 .btn-primary-alt-active, .btn-primary-alt:hover 以便您可以通过 jQuery 应用类来应用样式。你的 JS 看起来像：

// 这是我希望 CSS 样式发生的地方。 $('.btn-primary-alt').addClass('btn-primary-alt-active');

【讨论】：

【解决方案5】：

$("#submitForm").addClass("Add your class name");

在您的样式表中 .the-above-class-name { 背景颜色：[一些颜色]；颜色：[一些颜色]； }

或

$("#submitForm").css({"background-color":"some color", "color":"some color"});

如果您想了解更多信息，可以查看 W3Schools 以供参考 http://www.w3schools.com/jquery/jquery_css.asp http://www.w3schools.com/jquery/jquery_css_classes.asp

【讨论】：