在带有 Jquery 的 Html Class 标签上添加 Css

Question

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

我有一个 oncheck 查询，我想将更改样式的代码放在 return 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 样式。谢谢

Answer 1

$("#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;
  }
})

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

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

Answer 2

您可以这样声明您的 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');

Answer 3

我会保留 CSS 中的样式，因为无论如何您在单独的 CSS 文件中都有它。

我会将您的 CSS 扩展为： .btn-primary-alt:hover 到 .btn-primary-alt-active, .btn-primary-alt:hover 以便您可以应用 class 到 jQuery 来应用样式。你的 JS 看起来像：

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

Answer 4

最佳解决方案是创建一个新的 class（不是 :hover）。例如

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

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

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

和

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

Answer 5

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

你的风格sheet .上述-class-名称{ 背景颜色：[一些颜色]；颜色：[一些颜色]； }

或

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

在带有 Jquery 的 Html Class 标签上添加 Css

Add Css on a Html Class Tag With Jquery

css

arrays

jquery

stylesheet