如何在另一个范围内追加跨度？

Question

这是我的jsfiddle 基本上我想在span'spanValidation'的span中添加span元素。而且我想在一些元素中添加和删除一些类。以前它是在MVC和JQuery中使用自定义模型验证完成的，但现在我想在JQuery中处理它。 这是我的HTML：

<div class="form-group">
    <div class="row">
      <div class="col-md-4">
        <label class="control-label text-primary" for="SSN">Social Security Number</label><span> </span><span class="help-inline">(Last Four Digits Only)</span>
        <input name="SSN" class="form-control" id="SSN" type="text" value="" data-val-length-max="4" data-val-length="Enter only the last four digits of the SSN." data-val="true" data-val-regex-pattern="^\d{4}$" data-val-regex="Enter only the last four digits of the SSN.">
      </div>
      <div class="col-md-4">
        <br class="hidden-sm hidden-xs">
        <span class="field-validation-valid text-danger" id="spanValidation" data-valmsg-replace="true" data-valmsg-for="SSN"></span>


      </div>
      <div class="col-md-4">
      </div>
    </div>
  </div> 
  <button type="submit" id="btnSubmit" class="btn btn-primary">Submit</button>

这是我的JS：

$('#btnSubmit').click(function (event) {
 alert("hi");
 if ( $("#SSN").val() === "" ) {
    $(".spanValidation").addClass("field-validation-error").removeClass("field-validation-valid");
    $(".spanValidation").append("<span >Enter at least one of the following: Account Number, SSN, or Birth Date.</span>");
  }
  else {
    $(".spanValidation").removeClass("field-validation-error").addClass("field-validation-valid");
    $('span[id^="errorSpan"]').remove();
  }
 }

问题是，即使代码正在执行，但是ut没有添加id为'errorSpan'的新span，也没有更新与元素关联的类。 提前谢谢。

Answer 1

像这样使用：当你像使用类一样使用它时，spanValidation是id

$('#btnSubmit').click(function (event) {
alert("hi");


if ( $("#SSN").val() === "" ) {
    $("#spanValidation").addClass("field-validation-error").removeClass("field-validation-valid");
    $("#spanValidation").append("<span >Enter at least one of the following: Account Number, SSN, or Birth Date.</span>");
  }
  else {
    $("#spanValidation").removeClass("field-validation-error").addClass("field-validation-valid");
    $('span[id^="errorSpan"]').remove();
  }
 }

Answer 2

您想要包含jQuery并添加结束)，请注意id引用#选择器而不是.引用{注释：

$('#btnSubmit').click(function (event) {
  alert("hi");
  if ( $("#SSN").val() === "" ) {
    $("#spanValidation").addClass("field-validation-error").removeClass("field-validation-valid");
    $("#spanValidation").append("<span >Enter at least one of the following: Account Number, SSN, or Birth Date.</span>");
  }
  else {
    $("#spanValidation").removeClass("field-validation-error").addClass("field-validation-valid");
    $('span[id^="errorSpan"]').remove();
  }
});

如果您检查HTML，则会看到span附加了。

<强>更新

删除跨度使用：

$('#spanValidation').empty();

而不是$('span[id^="errorSpan"]').remove()。新版本没有ID，除非您希望在父版块中保留任何内容，否则您不必担心分配选择器，因为.empty()会删除所有内容。< / p>

DEMO