html - 如何从一个 CSS 类中删除特定的 css 属性,以便应用另一个在其上放置另一个属性的类?

所以我有表格,表格的样式是这样的:

#msform input, #msform textarea {
    padding: 8px 15px 8px 15px;
    border: 1px solid #ccc;
    border-radius: 0px;
    margin-bottom: 25px;
    margin-top: 2px;
    width: 100%;
    box-sizing: border-box;
    font-family: montserrat;
    color: #2C3E50;
    background-color: #ECEFF1;
    font-size: 16px;
    letter-spacing: 1px;
}

因为我正在验证输入元素,所以我想将 CSS 属性 border: 3px solid red; 与 jQuery 一起应用。问题是,如果我这样做 $("#make").addClass("invalid"); 它不会应用 border: 3px solid red; 而是保持相同的 border: 1px solid #ccc; (它已经在表单样式中定义)。

问题是我不能只从表单样式中删除 border: 1px solid #ccc; 然后应用我的类 invalid,因为我的表单中有多个输入,当我删除它时,它看起来很丑 + 所有输入都带有红色边框,我显然不想那样,我只想在那些为空的输入上有红色边框。

我尝试的是在 jQuery 中更具体(带有选择器)并删除属性,但它不起作用,即使在单击我的下一个按钮后我仍然有这样的 border: 1px solid #ccc; 边框。这是我的代码:

$(".next").click(function(){
var make = $("#make").val();
var model = $("#model").val();
var godina = $("#godina").val();
var engine = $("#engine").val();
var termin = $("#termin").val();
var usluga = $("#usluga").val();

if(make == ""){
    $('#msform input #make').css("border","");
    $('#msform input #make').addClass("validation");
    $("#proizvodjac_validation").addClass("validation");
    $('#proizvodjac_validation').html('whatever');
}



else{
current_fs = $(this).parent();
next_fs = $(this).parent().next();
        
        
//Add Class Active
$("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");

//show the next fieldset
next_fs.show();
//hide the current fieldset with style
current_fs.animate({opacity: 0}, {
step: function(now) {
// for making fielset appear animation
opacity = 1 - now;

current_fs.css({
'display': 'none',
'position': 'relative'
});
next_fs.css({'opacity': opacity});
},
duration: 500
});
setProgressBar(++current);
  }

});

回答1

好的,所以在对重要性进行了一些思考和研究并了解了如何以及将应用什么类(基本上是特异性)之后,我意识到在 #msform input, #msform textarea 之前移动类 .invalid 很重要。所以我不知道这个答案是否对其他人有帮助,但我通过以下方式解决了它:

  1. #msform input, #msform textarea 的所有属性复制到 .invalid 类,并用我的 border:3px solid red !important 替换边框,并将 .invalid 类移到 CSS 样式表中的 #msform input, #msform textarea 之前。
  2. 之后,我能够在 jQuery $("#make").addClass("invalid"); 中进行以下操作,并且 3px solid red 的边框成功应用于我的元素。

相似文章

jquery - 分页编号序列不起作用(jquery)

如果我单击任何数字,分页顺序将不起作用。如果我单击数字3,它会跳到数字4,每次我单击该数字时,它都会跳到另一个数字。但是,如果我单击下一个和上一个按钮,它就可以正常工作。它的发生是因为省略号li。任何...

html - 如何使 menu 中的所有项目都具有粘性?

我正在尝试向我的网站添加一个menu栏,它看起来几乎是我想要的方式,左边是汉堡包,右边是两个联系信息。然而,只有汉堡是粘性的。另外,我想为menu添加背景颜色,以便在滚动网页时,粘性位整齐地位于彩色条...

最新文章