Question

我总共有6个div。我在其中一个上做了另一个黑色的div。我实现了按钮'添加另一个计划'，如果总和（JSFiddle中的变量显示）不等于5，我希望它隐藏黑色div。

JS ：

$(function () {

    $(".plan-quantity").append('<div class="inc button">+</div><div class="dec button">-</div>');

    $(".button").on("click", function () {

        var $button = $(this);
        var oldValue = $button.parent().find("input").val();
        var sum = 0;
        $('.plan-quantity input[type="text"]').each(function () {
            sum += Number($(this).val());
        });

        if ($button.text() == "+" && sum < 5) {
            var newVal = parseFloat(oldValue) + 1;

            if ($button.text() == "+" && sum > 0) {
                var discount = ((sum * 5) * 24) + 120;
                $(".total-discount").html('Total savings on all plans over 2 years: &euro;' + discount);
            }

        } else if ($button.text() == "-") {
            // Don't allow decrementing below zero
            if (oldValue > 0) {
                var newVal = parseFloat(oldValue) - 1;
                var discount = (((sum * 5) * 24) - 120);
                $(".total-discount").html('Total savings on all plans over 2 years: &euro;' + discount);

                if (newVal == 1) {
                    $(".total-discount").html('Total savings on all plans over 2 years: &euro;0');
                }

            } else {
                newVal = 0;
            }
        } else {
            return false;
        }

        $button.parent().find("input").val(newVal);
    });

});

function validate() {
    if (document.getElementById('handset-m').checked) {
        document.getElementById('price-m').innerHTML = 'Price: &euro;20';
    } else {
        document.getElementById('price-m').innerHTML = 'Price: &euro;18';
    }

    if (document.getElementById('handset-l').checked) {
        document.getElementById('price-l').innerHTML = 'Price: &euro;35';
    } else {
        document.getElementById('price-l').innerHTML = 'Price: &euro;25';
    }

    if (document.getElementById('handset-xl').checked) {
        document.getElementById('price-xl').innerHTML = 'Price: &euro;55';
    } else {
        document.getElementById('price-xl').innerHTML = 'Price: &euro;35';
    }

    if (document.getElementById('handset-xxl').checked) {
        document.getElementById('price-xxl').innerHTML = 'Price: &euro;75';
    } else {
        document.getElementById('price-xxl').innerHTML = 'Price: &euro;50';
    }
}

这是我试图使用的隐藏部分的JS，但遗憾的是没有管理：

$(".button-hide").click(function() {
         $("#disable").hide();
        });

        }else{
            alert("Not Possible to have more then 5");
            }

我有一个小提琴你可以更好地理解：http://jsfiddle.net/C34AQ/1/

非常感谢你的帮助。

Answer 1

您没有在小提琴中添加查询，因此无法正常工作（$ undefined）
$(".button").on("click", function () {您正在使用.button类来选择按钮，但您的按钮没有这样的类。它改为button-hie。

选中此fiddle

$("input[type='button']").on("click", function () {

    var $button = $(this);
    var oldValue = $button.parent().find("input").val();
    var sum = 0;
    $('.plan-quantity input[type="text"]').each(function () {
        sum += Number($(this).val());

    });

    if(sum<5) $("#disable").hide();
    else alert('your alert');

Answer 2

在表单上取一个隐藏字段，并每次更新其值。在隐藏函数之前，检查隐藏字段的值是否为5。如果是5则隐藏它。

根据总和值隐藏div点击

2 个答案: