jQuery - 通过 Javascript 通过 if/else if 更改 HTML 中的类

Question

我有一个运行良好的引导验证表单，还可以更改 error 和 success 上的 inputField 颜色。

问题是，我想更改标签的text-color和border-color。我尝试了各种 JavaScript 代码，但没有一个适合我，因为我不熟悉 javascript。

HTML

<form action="" class="form-horizontal form-bordered storyForm" novalidate>

<div class="form-body">
    <div class="form-group" id="form-group">
        <div class="controls">
            <label class="control-label" id="label" for="email">Email</label>
            <input type="email" id="email" class="form-control" name="email" required data-validation-required-message="This field is required">
        </div>
    </div>
    <div class="form-group" id="form-group">
        <div class="controls">
            <label class="control-label" id="label" for="password">Password</label>
            <input type="password" id="password" class="form-control" name="password" required data-validation-required-message="This field is required">
        </div>
    </div>
</div>

<div class="form-actions">
    <div class="row">
        <div class="col-md-12">
            <div class="row">
                <div class="offset-sm-3 col-md-9">
                    <button type="submit" id="submit" class="btn btn-success"> <i class="fa fa-check"></i> Submit</button>
                    <button type="button" class="btn btn-inverse">Cancel</button>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

form.storyForm label{
  padding: 0px 25px;
  /* background-color: rgba(0,0,0,.15); */
  color: #000;
  border-radius: 4px 4px 0px 0px;
  border: 1px solid rgba(0,0,0,.15);
  border-bottom: 1px solid white !important;
  top: 1px;
  position: relative;
}
form.storyForm label.error{
  padding: 0px 25px;
  /* background-color: rgba(0,0,0,.15); */
  color: #ef5350;
  border-radius: 4px 4px 0px 0px;
  border: 1px solid #ef5350;
  border-bottom: 1px solid white !important;
  top: 1px;
  position: relative;
}
form.storyForm label.validate{
  padding: 0px 25px;
  /* background-color: rgba(0,0,0,.15); */
  color: #26dad2;
  border-radius: 4px 4px 0px 0px;
  border: 1px solid #26dad2;
  border-bottom: 1px solid white !important;
  top: 1px;
  position: relative;
}

我正在尝试添加/删除类的 javascript 代码

<script>
$(document).ready(function() {
    $("#submit").click(function() {
        if ($("#form-group").hasClass("error")) {
            $("#label").addClass("error");
        } else if ($("#form-group").hasClass("validate")) {
            $("#label").removeClass("error");
            $("#label").addClass("validate");
        }
    });
});
</script>

我还通过class 进行了检查，但它对我也不起作用

<script>
$(document).ready(function() {
 $("#submit").click(function() {
    if ($(".form-group").hasClass("error")) {
        $(".control-label").addClass("error");
    } else if ($("#form-group").hasClass("validate")) {
        $(".control-label").removeClass("error");
        $(".control-label").addClass("validate");
    }
 });
});
</script>

Answer 1

您在JavaScript 中使用'$'，请确保您已包含JQuery 库。 '$' 是 JQuery 的主要基础对象（或函数）。如果您没有使用JQuery，则需要使用JavaScript 方法，例如.getElementById() 或.querySelector()，并将您的id 值作为参数传递给这些方法。

此外，使用 querySelector 是解决此功能的更好方法。

这是MDN getElementById() documentation 和MDN querySelector() documentation 的链接。

我希望这会有所帮助！祝你好运！

Answer 2

ID 选择器仅在使用 javascript 时返回页面上具有匹配 ID 的 FIRST 元素。这是一个简单的代码笔演示：https://codepen.io/anon/pen/bYoqZP

您的嘶嘶声选择器绝对不应该是 ID 选择器：$('#xxxxxxx')。您应该将$('#label') 更改为只是一个元素选择器：$('label') 或选择类$('.control-label')。 您还为 form-group 使用了 ID 选择器，它也只会返回具有该 ID 的第一个元素，因此会阻止您的点击处理程序对第 2、第 3、...第 n 个表单组产生影响。

对于您提供的示例，没有任何内容可以解释您如何验证表单或添加您首先要查找的错误类。所以现在发生的事情是您正在扩展提交按钮的功能以提交表单和调整类。问题是，当表单提交时，什么都不会发生，因为您没有任何操作，并且一旦用户单击提交，您就不会对您的数据做任何事情。

如果您将error 类添加到表单组并单击提交，您会看到您的更改生效，但您只需要更多代码来处理您的表单，以便真正执行任何操作。