jQuery IF Value等于Show Else Show

时间：2013-09-05 08:26:13

标签： jquery if-statement

我正在尝试从输入中获取值，如果值= 1,2,3 ...则显示内容，如果value = 4,5,6 ...显示其他内容。我几乎让它工作然后有些东西坏了。多年来我一直在玩这个。任何人都可以快速查看并指出我在哪里打破它。

var amount = $(".quantity-wrapper > .input-text").val();
    if(amount = '1') {
        $('.product-addon-one-attendee').show();
    }
    if(amount = '2'){
        $('.product-addon-one-attendee').show();
        $('.product-addon-two-attendees').show();
    } 
    if(amount = '3'){
        $('.product-addon-one-attendee').show();
        $('.product-addon-two-attendees').show();
        $('.product-addon-three-attendees').show();
    } 
    if(amount = '4'){
        $('.product-addon-one-attendee').show();
        $('.product-addon-two-attendees').show();
        $('.product-addon-three-attendees').show();
        $('.product-addon-four-attendees').show();
    } 
    if(amount = '5'){
        $('.product-addon-one-attendee').show();
        $('.product-addon-two-attendees').show();
        $('.product-addon-three-attendees').show();
        $('.product-addon-four-attendees').show();
        $('.product-addon-five-attendees').show();
    }
    if(amount = '6'){
        $('.product-addon-one-attendee').show();
        $('.product-addon-two-attendees').show();
        $('.product-addon-three-attendees').show();
        $('.product-addon-four-attendees').show();
        $('.product-addon-five-attendees').show();
        $('.product-addon-six-attendees').show();
    }
    if(amount = '7'){
        $('.product-addon-one-attendee').show();
        $('.product-addon-two-attendees').show();
        $('.product-addon-three-attendees').show();
        $('.product-addon-four-attendees').show();
        $('.product-addon-five-attendees').show();
        $('.product-addon-six-attendees').show();
        $('.product-addon-seven-attendees').show();
    }
    if(amount = '8'){
        $('.product-addon-one-attendee').show();
        $('.product-addon-two-attendees').show();
        $('.product-addon-three-attendees').show();
        $('.product-addon-four-attendees').show();
        $('.product-addon-five-attendees').show();
        $('.product-addon-six-attendees').show();
        $('.product-addon-seven-attendees').show();
        $('.product-addon-eight-attendees').show();
    }
    if(amount = '9'){
        $('.product-addon-one-attendee').show();
        $('.product-addon-two-attendees').show();
        $('.product-addon-three-attendees').show();
        $('.product-addon-four-attendees').show();
        $('.product-addon-five-attendees').show();
        $('.product-addon-six-attendees').show();
        $('.product-addon-seven-attendees').show();
        $('.product-addon-eight-attendees').show();
        $('.product-addon-nine-attendees').show();
    }
    if(amount = '10'){
        $('.product-addon-one-attendee').show();
        $('.product-addon-two-attendees').show();
        $('.product-addon-three-attendees').show();
        $('.product-addon-four-attendees').show();
        $('.product-addon-five-attendees').show();
        $('.product-addon-six-attendees').show();
        $('.product-addon-seven-attendees').show();
        $('.product-addon-eight-attendees').show();
        $('.product-addon-nine-attendees').show();
        $('.product-addon-ten-attendees').show();
    }
    if(amount = '11'){
        $('.product-addon-one-attendee').show();
        $('.product-addon-two-attendees').show();
        $('.product-addon-three-attendees').show();
        $('.product-addon-four-attendees').show();
        $('.product-addon-five-attendees').show();
        $('.product-addon-six-attendees').show();
        $('.product-addon-seven-attendees').show();
        $('.product-addon-eight-attendees').show();
        $('.product-addon-nine-attendees').show();
        $('.product-addon-ten-attendees').show();
        $('.product-addon-eleven-attendees').show();
    }
    if(amount = '12'){
        $('.product-addon-one-attendee').show();
        $('.product-addon-two-attendees').show();
        $('.product-addon-three-attendees').show();
        $('.product-addon-four-attendees').show();
        $('.product-addon-five-attendees').show();
        $('.product-addon-six-attendees').show();
        $('.product-addon-seven-attendees').show();
        $('.product-addon-eight-attendees').show();
        $('.product-addon-nine-attendees').show();
        $('.product-addon-ten-attendees').show();
        $('.product-addon-eleven-attendees').show();
        $('.product-addon-twelve-attendees').show();
    }

6 个答案:

答案 0 :(得分：6)

if(amount = '8'){  // you forget ==

改变

if(amount == '8'){

答案 1 :(得分：3)

if(amount = '1') // it is assigning not the comparision

正确的比较方式

if(amount === '1')

答案 2 :(得分：2)

其他人已经指出你应该使用比较运算符，但如何减少那些丑陋和重复的代码。您需要更改标记，以便最终生成：

product-addon-1-attendee product-addon-2-attendee product-addon-n-attendee 

// Get the amount value as a number
var amount = parseInt($(".quantity-wrapper > .input-text").val(), 10) || 0;

for (var i = 0; i < amount; ++i) {
    $('.product-addon-' + (i + 1) + '-attendee').show();
}

答案 3 :(得分：2)

注意：考虑到您的元素是按顺序排列的1到12

要缩短代码，您可以使用：lt。并选择*。 

   $('[class*="product-addon-"]:lt('+(amount)+')').show();

DEMO

否则，另一种方法是将所有元素的类更改为product-addon-anttendee 

<div class="product-addon-attendee">1</div>
<div class="product-addon-attendee">2</div>

并使用此代码

$('.product-addon-attendee:lt('+amount+')').show();

DEMO

答案 4 :(得分：0)

您需要将等号'='更改为'=='或'==='，这将比较而不是分配。 同样对于您的代码，更好的结构将是switch，可能还有for个循环。如果需要，可以更容易地跟踪和调试。

答案 5 :(得分：0)

更好的选择if if statement：

var amount = $(".quantity-wrapper > .input-text").val();
switch (amount) {
    case ('1'):
        alert('1');
        $('.product-addon-one-attendee').show();
        break;
    case ('2'):
        alert('2');
        $('.product-addon-one-attendee').show();
        $('.product-addon-two-attendees').show();
        break;
    case ('3'):
        $('.product-addon-one-attendee').show();
        $('.product-addon-two-attendees').show();
        $('.product-addon-three-attendees').show();
        break;
    case ('4'):
        $('.product-addon-one-attendee').show();
        $('.product-addon-two-attendees').show();
        $('.product-addon-three-attendees').show();
        $('.product-addon-four-attendees').show();
        break;
    case ('5'):
        $('.product-addon-one-attendee').show();
        $('.product-addon-two-attendees').show();
        $('.product-addon-three-attendees').show();
        $('.product-addon-four-attendees').show();
        $('.product-addon-five-attendees').show();
        break;
    case ('6'):
        $('.product-addon-one-attendee').show();
        $('.product-addon-two-attendees').show();
        $('.product-addon-three-attendees').show();
        $('.product-addon-four-attendees').show();
        $('.product-addon-five-attendees').show();
        $('.product-addon-six-attendees').show();
        break;
    case ('7'):
        $('.product-addon-one-attendee').show();
        $('.product-addon-two-attendees').show();
        $('.product-addon-three-attendees').show();
        $('.product-addon-four-attendees').show();
        $('.product-addon-five-attendees').show();
        $('.product-addon-six-attendees').show();
        $('.product-addon-seven-attendees').show();
        break;
    case ('8'):
        $('.product-addon-one-attendee').show();
        $('.product-addon-two-attendees').show();
        $('.product-addon-three-attendees').show();
        $('.product-addon-four-attendees').show();
        $('.product-addon-five-attendees').show();
        $('.product-addon-six-attendees').show();
        $('.product-addon-seven-attendees').show();
        $('.product-addon-eight-attendees').show();
        break;
    case ('9'):
        $('.product-addon-one-attendee').show();
        $('.product-addon-two-attendees').show();
        $('.product-addon-three-attendees').show();
        $('.product-addon-four-attendees').show();
        $('.product-addon-five-attendees').show();
        $('.product-addon-six-attendees').show();
        $('.product-addon-seven-attendees').show();
        $('.product-addon-eight-attendees').show();
        $('.product-addon-nine-attendees').show();
        break;
    case ('10'):
        $('.product-addon-one-attendee').show();
        $('.product-addon-two-attendees').show();
        $('.product-addon-three-attendees').show();
        $('.product-addon-four-attendees').show();
        $('.product-addon-five-attendees').show();
        $('.product-addon-six-attendees').show();
        $('.product-addon-seven-attendees').show();
        $('.product-addon-eight-attendees').show();
        $('.product-addon-nine-attendees').show();
        $('.product-addon-ten-attendees').show();
        break;
    case ('11'):
        $('.product-addon-one-attendee').show();
        $('.product-addon-two-attendees').show();
        $('.product-addon-three-attendees').show();
        $('.product-addon-four-attendees').show();
        $('.product-addon-five-attendees').show();
        $('.product-addon-six-attendees').show();
        $('.product-addon-seven-attendees').show();
        $('.product-addon-eight-attendees').show();
        $('.product-addon-nine-attendees').show();
        $('.product-addon-ten-attendees').show();
        $('.product-addon-eleven-attendees').show();
        break;
    case ('12'):
        $('.product-addon-one-attendee').show();
        $('.product-addon-two-attendees').show();
        $('.product-addon-three-attendees').show();
        $('.product-addon-four-attendees').show();
        $('.product-addon-five-attendees').show();
        $('.product-addon-six-attendees').show();
        $('.product-addon-seven-attendees').show();
        $('.product-addon-eight-attendees').show();
        $('.product-addon-nine-attendees').show();
        $('.product-addon-ten-attendees').show();
        $('.product-addon-eleven-attendees').show();
        $('.product-addon-twelve-attendees').show();
        break;
}
相关问题
最新问题