2017-01-27 2 views
1

Я пытаюсь показать или скрыть DIV на основе общей стоимости моих выбирает:показать DIV зависит от значения

Вот демо: https://jsfiddle.net/wrfvukjv/

<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'); 
} 

, но он просто не возвращает сообщение

+0

Каковы условия, чтобы показать или скрыть div? –

+0

@james_bond Я добавил свои попытки в сообщение – PhpDude

ответ

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; 
} 
+2

Он работает, пока вы не отмените выбор, поэтому, если я его покажу, то измените мои параметры, сообщение остается на месте? – PhpDude

+0

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

1

Вы можете добавьте условие в конце вашей функции 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(); 
    } 
} 
0

Можно также уменьшить код. Смотри ниже. #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

Смежные вопросы