代码之家 › 专栏 › 技术社区 › KatherineMichelle

如果该类存在,或者该类不存在,请使用jquery和submit表单执行一些操作-但不会提交

if-statement forms jquery javascript

KatherineMichelle · 技术社区 · 6 年前

我有一个表单,当用户选择衣服尺寸时,表单会被提交,但是如果他们没有选择任何尺寸,就会出现一条错误消息。这部分工作得很好,但有时没有尺寸选择(例如,当购买钱包时)。如果存在大小选项,则会存在一个具有“大小属性”类的li元素,其中li是另一个具有类es值的ul->li,并且当用户选择一个es值时,会给它一个选定的类。看起来像这样:

<li class="size-attribute>
 <ul>
  <li class="es-value"></li>
  <li class="es-value selected"></li>
  <li class="es-value"></li>
 </ul>
</li>

但是,如果没有要选择的大小(如用于钱包),则具有class-size属性的列表项不存在。我正在尝试编写代码,以便当选定类的ES值存在或根本不存在大小属性时,表单将提交。但是,对于我编写的代码,当我单击“添加到包”时,什么都不会发生。这是我的代码:

.on('click', '.modalAddToBagButton', function(e) {
            e.preventDefault();
            $form = $(this).closest("#dialog-addToBag").find('form');
            if( $( ".es-value.selected" ).length || !$("li .size-attribute")) {
                $form.submit();
            } else {
                $("#errormessage").show();
                $("#error-border").addClass("error-border");
            }

有人能知道我做错了什么,为什么表格不能提交吗?

2 回复 | 直到 6 年前

rlwheeler 6 年前

我将使用jquery中的.hasClass()方法检查是否存在任何大小属性。

.on('click', '.modalAddToBagButton', function(e) {
    e.preventDefault();
    $form = $(this).closest("#dialog-addToBag").find('form');
    if( $( ".es-value.selected" ).length || !$("li").hasClass("size-attribute")){
        $form.submit();
    } else {
        $("#errormessage").show();
        $("#error-border").addClass("error-border");
    }
}

Chris O'Kelly 6 年前

问题在于条件: ( $( ".es-value.selected" ).length || !$("li .size-attribute"))

第二部分, !$("li .size-attribute")) 总是返回错误。原因是 $(...) 返回一个对象。在javascript中,对象总是真实的,所以 !$(...) 总是错的。

最后, $("li .size-attribute") 并不代表你正在寻找的东西。 li .size-attribute 表示具有类的元素 size-attribute 类型的元素内部 li ,你想要的是 $("li.size-attribute") -类型的元素 锂 ,有一类 大小属性

如果您以与第一部分相同的方式构造它并修复CSS查询,它将工作,例如。 ( $( ".es-value.selected" ).length || !$("li.size-attribute").length)

尽管我通常倾向于更具描述性的方法:

.on('click', '.modalAddToBagButton', function(e) {
            e.preventDefault();
            $form = $(this).closest("#dialog-addToBag").find('form');

            if( $( ".es-value.selected" ).length > 0) {
                // a size was selected
                $form.submit();
            } else if ($("li.size-attribute").length === 0) {
                // No size option was present
                $form.submit();
            } else {
                $("#errormessage").show();
                $("#error-border").addClass("error-border");
            }
});