如果存在此类，或者不存在，请使用jQuery做一些事情并提交表单-但不会提交

Question

我有一个表格，当用户选择衣服尺寸时，会提交表格，但是如果他们不选择任何尺寸，则会出现错误消息。 这部分效果很好，但是有时没有大小选择（例如，购买钱包时）。 如果有一个size选项，则存在一个带有“ size-attribute”类的li元素，并且在此li内还有另一个ul->具有es-value类的li，并且当用户选择一个es-value时，它将被赋予一类选择。 看起来像这样：

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

但是，如果没有可供选择的大小（例如钱包），则不存在具有类别大小属性的列表项。 我正在尝试编写我的代码，以便当存在带有选定类的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");
            }

谁能弄清楚我做错了什么，为什么表格不提交？

Answer 1

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

第二部分!$("li .size-attribute"))将始终返回false。 这样做的原因是$(...)返回一个对象。 用javascript编写的对象始终是真实的，因此!$(...)始终是false-y。

最后， $("li .size-attribute")实际上并不代表您要寻找的东西。 li .size-attribute表示一个元素，其类别size-attribute位于li类型的元素中，而您想要的是$("li.size-attribute") - 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");
            }
});

Answer 2

我将使用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");
    }
}