多个数字输入，jquery .each 如果 val() 大于，则将类添加到元素

Question

我需要遍历某个类名的输入元素列表。 并且基于如果类为"attendeeQuantityInput"的任何输入的值大于 0，则向页面上的元素添加一个类，如果这些输入中的任何一个具有"attendeeQuantityInput"类，则从元素中删除该类。
我正在使用jQuery。我尝试了 .each（），但由于某种原因我无法获取输入的值，检查它，然后向元素添加一个类。

这是我到目前为止尝试过的：

.JS

$(".AddMinusButton").click(function (event) {
    memberZeroAttendees();
 });
 function memberZeroAttendees() {
    $("#MemberTotalAttendeesPage input[name=memAttendees]").each(function() {
        //alert($(this).val());
        if ($(this).val() == 0 || $(this).val() == null) {
            //alert($(this).attr("class"));
            $('#MemberTotalAttendeesPage .continueBtn').addClass('disabled');
        } else {
            $('#MemberTotalAttendeesPage .continueBtn').removeClass('disabled');
        }

    });

.HTML

<div id="MemberTotalAttendeesPage">
           <div class="attendeesContainer">
               <h3>Member Attendees</h3>
                  <ul class="productVariantList attendeesList">
                   <li>
                    <span class="variantTitle">
                        Member Adult
                    </span>
                    <small>Ages 19-64 </small>
                    <div class="variantQuantity">
                        <span class="minusBtn AddMinusButton">-</span>
                        <input type="number" name="memAttendees" value="" placeholder="0" min="0" max="2" maxlength="2" id="memAdultInput" class="attendeeQuantityInput" />
                        <span class="addBtn AddMinusButton">+</span>
                    </div>
                </li>
                <li>
                    <span class="variantTitle">
                        Member Junior
                    </span>
                    <small>Ages 11-18 </small>
                    <div class="variantQuantity">
                        <span class="minusBtn AddMinusButton">-</span>
                        <input type="number" name="memAttendees" value="" placeholder="0" min="0" max="2" maxlength="2" class="attendeeQuantityInput" />
                        <span class="addBtn AddMinusButton">+</span>
                    </div>
                </li>
                <li>
                    <span class="variantTitle">
                        Member Child
                    </span>
                    <small>Ages 3-10 </small>
                    <div class="variantQuantity">
                        <span class="minusBtn AddMinusButton">-</span>
                        <input type="number" name="memAttendees" value="" placeholder="0" min="0" max="2" maxlength="2" class="attendeeQuantityInput" />
                        <span class="addBtn AddMinusButton">+</span>
                    </div>
                </li>
                <li>
                    <span class="variantTitle">
                        Member Toddler
                    </span>
                    <small>Ages 0-3 </small>
                    <div class="variantQuantity">
                        <span class="minusBtn AddMinusButton">-</span>
                        <input type="number" name="memAttendees" value="" placeholder="0" min="0" maxlength="2" class="attendeeQuantityInput" />
                        <span class="addBtn AddMinusButton">+</span>
                       </div>
                   </li>
            </ul>
           </div>
           <a href="#GATotalAttendeesPage" class="continueBtn">Continue</a>
        </div>

Answer 1

我不知道

....each()行 - 使用控制台查看是否可以使用选择器选择任何内容。

但是还有另一条线会给你带来麻烦

 $(this).val() == 0 || $(this).val() == null

$(this).val() == ''和$(this).val() == undefined呢？

您可以考虑使用

 if (parseInt($(this).val()) && parseInt($(this).val()) > 0 ) { ... } else {...}

逻辑也有些奇怪，因为即使找到应该启用或禁用的输入，您仍会继续迭代输入。

我会首先禁用该按钮，然后迭代each，如果找到一个值为> 0 的按钮，则"启用"

Answer 2

我不太清楚为什么会这样，但这是我为自己找到的答案。这只是我的循环所需的函数。 我只是发布该功能，因为这是需要的。

希望它能帮助其他人。

 function memberZeroAttendees() {
    var validate= false;
    $('#MemberTotalAttendeesPage input').each(function(){
        if($(this).val() >= 1)
            validate = true;
    });
    if(!validate){
        $('#MemberTotalAttendeesPage .continueBtn').addClass('disabled');
        //return false;
    }
    else { 
        $('#MemberTotalAttendeesPage .continueBtn').removeClass('disabled');
    }
}