Question

我试图根据我选择的整体价值显示或隐藏div：

<script type="text/javascript">
function recalculate() {
    var sum = 0;
    $("input[type=radio]:checked").each(function () {
        sum += parse($(this).val());
        });
    $("#sum").html(sum.toFixed(2));
}

$("input[type=radio]").change(function () {
    recalculate();
});

</script>

我在这里试过：

if (sum > 2)
{
    console.log('showmessage');

} 
else
{
    console.log('no message');
}

但它只返回没有消息

Answer 1

您已更新jsFiddle

Javascript：

function recalculate() {
    var sum = 0;
    $("input[type=radio]:checked").each(function () {
        sum += parseFloat($(this).val());
        });
    $("#sum").html(sum.toFixed(2));
    if(sum >= 2) $("#message").show();
    else $("#message").hide();
}

$("input[type=radio]").change(function () {
    recalculate();
});

您的消息的HTML：

<div id="message">
  Show message IF overall sum is >= 2<br>
  Hide if < 2
</div>

还有一点CSS用于在页面加载时隐藏#message：

#message {
  display: none;
}

Answer 2

您可以在recalculate()功能的末尾添加条件：

function recalculate() {
    var sum = 0;
    $("input[type=radio]:checked").each(function () {
        sum += parseFloat($(this).val());
        });
    $("#sum").html(sum.toFixed(2));

    if(sum >= 2){          
        $("#message").show();
    }else{
        $("#message").hide();
    }
}

Answer 3

也可以用更少的代码完成。见下文。 #message最初是隐藏的，当:radio:checked值总和大于或等于2时，您会显示#message

CSS

#message{
  display:none
}

<强> JQUERY

var sum=0;
$("input[type=radio]").change(function () {
    sum=sum+parseInt($(this).val());//ASSUMING VAL TO BE INT ONLY
    sum>=2?$("#message").show():$("#message").hide()
});

WORKING FIDDLE

显示div依赖于值

3 个答案: