jquery - How to show div depending on the amount of value -
how show div depending on amount of value?
jquery(function () { jquery('#btn_test').click(function () { $(this).parent().children('#test_inner').slidetoggle('500'); return false; }); jquery("input[type='radio']").change(function () { calculate(); }); function calculate() { var sum = 0; jquery("input[type='radio']:checked").each(function () { sum += isnan(this.value) || $.trim(this.value) === '' ? 0 : parsefloat(this.value); jquery("#totalsum").html(sum); $("input[type='radio']").change(function () { if (value <= 8) { jquery("#test_result_item_1").show(); } else if ((9 <= value) && (value <= 12)) { jquery("#test_result_item_2").show(); } else if ((13 <= value) && (value <= 17)) { jquery("#test_result_item_3").show(); } else if (18 >= value) { jquery("#test_result_item_4").show(); } }); }); } });#test { margin-top: 50px; } #test h2 { margin-top: 30px; } #test_inner { display: none; } #btn_test { margin-top: 25px; } .test-item { margin: 25px auto; } .test-item > ol { padding-left: 30px; counter-reset: list; } .test-item > ol > li { margin: 10px 0; padding-left: 20px; position: relative; } .test-item > ol > li:before { content: counter(list, lower-alpha)") "; counter-increment: list; position: absolute; top: 0; left: 0; font-weight: 700; } .test-item > ol > li input[type="radio"], .test-item > ol > li span { display: inline-block; vertical-align: middle; } .test-item > ol > li span { padding: 0 5px; position: relative; } .test-item > ol > li label input[type="radio"] { display: none; } .test-item > ol > li label input[type="radio"]:checked + span { background: #008000; color: #fff; display: block; padding: 1px 5px; } .test-item > ol > li label input[type="radio"]:checked + span:before { content:'\2714'; position: absolute; top: 0; left: -40px; color: #008000; font-weight: 700; } .test-hidden { display: none; } .test-unhidden { display: block; } .test-result { } .test-result-item { margin: 25px auto; display: none; } #totalsum { text-align: center; font-weight: 700; font-size: 20px; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div id="test"> <div class="btn btn-green btn-green-lg2 text-center" id="btn_test"> <a href="#">click</a> </div> <div id="test_inner"> <h2>test</h2> <div class="test-item"> <h3>ask?</h3> <ol> <li> <label> <input type="radio" value="1" name="test1" /><span>variant 1</span> </label> <li> <label> <input type="radio" value="2" name="test1" /><span>variant 2</span> </label> <li> <label> <input type="radio" value="3" name="test1" /><span>variant 3</span> </label> <li> <label> <input type="radio" value="4" name="test1" /><span>variant 4</span> </label> </ol> </div> <div class="test-item"> <h3>ask?</h3> <ol> <li> <label> <input type="radio" value="1" name="test2" /><span>variant 1</span> </label> <li> <label> <input type="radio" value="2" name="test2" /><span>variant 2</span> </label> <li> <label> <input type="radio" value="3" name="test2" /><span>variant 3</span> </label> <li> <label> <input type="radio" value="4" name="test2" /><span>variant 4</span> </label> </ol> </div> <div class="test-item"> <h3>ask?</h3> <ol> <li> <label> <input type="radio" value="1" name="test3" /><span>variant 1</span> </label> <li> <label> <input type="radio" value="2" name="test3" /><span>variant 2</span> </label> <li> <label> <input type="radio" value="3" name="test3" /><span>variant 3</span> </label> <li> <label> <input type="radio" value="4" name="test3" /><span>variant 4</span> </label> </ol> </div> <div class="test-item"> <h3>ask?</h3> <ol> <li> <label> <input type="radio" value="1" name="test4" /><span>variant 1</span> </label> <li> <label> <input type="radio" value="2" name="test4" /><span>variant 2</span> </label> <li> <label> <input type="radio" value="3" name="test4" /><span>variant 3</span> </label> <li> <label> <input type="radio" value="4" name="test4" /><span>variant 4</span> </label> </ol> </div> <div class="test-item"> <h3>ask?</h3> <ol> <li> <label> <input type="radio" value="1" name="test5" /><span>variant 1</span> </label> <li> <label> <input type="radio" value="2" name="test5" /><span>variant 2</span> </label> <li> <label> <input type="radio" value="3" name="test5" /><span>variant 3</span> </label> <li> <label> <input type="radio" value="4" name="test5" /><span>variant 4</span> </label> </ol> </div> <div class="test-result"> <div>total: <span id="totalsum">0</span> points</div> <div class="test-result-item" id="test_result-item_1"> <h3> less 20 points</h3> <p>div 1</p> </div> <div class="test-result-item" id="test_result-item_2"> <h3>20-30 points</h3> <p>div 2</p> </div> <div class="test-result-item" id="test_result-item_3"> <h3>30-40 points</h3> <p>div 3</p> </div> <div class="test-result-item" id="test_result-item_4"> <h3>more 40 points</h3> <p>div 4</p> </div> </div> </div> </div>value under 8 - show div1
value 9-12 - show div2
value 13-17 - show div3
value 18 , more - show div4
thank you! glad of help!
you calling different divs code i.e. id trying read not present on page. logic lengthy , wrong. have updated fiddle it. logic
if (sum <= parseint(8)) { jquery("#test_result-item_1").show(); } else if ((9 <= sum) && (sum <= 12)) { jquery("#test_result-item_2").show(); } else if ((13 <= sum) && (sum <= 17)) { jquery("#test_result-item_3").show(); } else if (18 >= sum) { jquery("#test_result-item_4").show(); }
Comments
Post a Comment