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，如果找到一个值为＆gt; 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');
    }
}

多个数字输入，jquery .each如果value（）大于，则将类添加到元素

2 个答案: