Question

我有一个Bootstrap手风琴/井，每个手风琴部分都带有表格元素。当用户浏览不同的字段和手风琴部分时，我希望根据是否填写所有必需的数据来显示跨度。所有输入字段都位于.section内。如果用户未填写必填字段，则输入和标签周围的.form-group将获得类.has-error。解决问题后，.has-error将替换为.no-error。

因此，如果.has-error类出现在.section（包括孙子孙女的所有后代）的任何位置，则范围.field-error应出现在.lbl.lblBig中，这是.section之前的兄弟{ {1}}并包含该手风琴部分的标题。如果.has-error不在任何地方，我希望范围.field-ok显示在.lbl.lblBig内。

这是基本的布局：

 <div class="lbl lblBig">
      Section 1
      <span class="field-error" style="display:none"></span>
      <span class="field-ok" style="display:none"></span>
 </div>
 <div class="section"> <!--input fields for section 1-->
      <div class="form-group">
           <label class="control-label">First</label>
           <input class="required form-control" placeholder="First">
      </div>
      <div class="form-group">
           <label class="control-label">Last</label>
           <input class="required form-control" placeholder="Last">
      </div>
 </div>
 <div class="lbl lblBig">
      Section 2
      <span class="field-error" style="display:none"></span>
      <span class="field-ok" style="display:none"></span>
 </div>
 <div class="section"> <!--input fields for section 2-->
      <div class="form-group">
           <label class="control-label">Street</label>
           <input class="required form-control" placeholder="Street">
      </div>
      <div class="form-group">
           <label class="control-label">City</label>
           <input class="required form-control" placeholder="City">
      </div>
 </div>

我把这个脚本放在一起，但它不起作用。我不需要.no-error类，但我创建它是为了让某些东西工作。我在搜索.section的死者并使用该信息更改.lbl.lblBig时遇到问题。

$(".section").each(function(){
    if ($(this).find(".has-error").length) {
        $(this).prev(".lbl.lblBig").find(".field-error").show();
        $(this).prev(".lbl.lblBig").find(".field-ok").hide();
    }
    else if ($(this).find(".no-error").//do opposite of length? ) {
        $(this).prev(".lbl.lblBig").find(".field-error").hide();
        $(this).prev(".lbl.lblBig").find(".field-ok").show();
    }
});

我无法更改任何页面和表单的HTML，因此我在这方面受到限制。任何帮助将不胜感激。如果可以的话，我会给你烤一个饼干，但这是互联网，并没有3D打印烘焙技术。谢谢。

Answer 1

您的条件表达式应为if (length > 0)。

$(".section").each(function(){
    if ($(this).find(".has-error").length > 0) {
        $(this).prev(".lbl.lblBig").find(".field-error").show();
        $(this).prev(".lbl.lblBig").find(".field-ok").hide();
    }
    else {
        $(this).prev(".lbl.lblBig").find(".field-error").hide();
        $(this).prev(".lbl.lblBig").find(".field-ok").show();
    }
});

http://jsfiddle.net/9dbyq2v3/

在div的后代中的任何地方找到类

1 个答案: