Question

如何根据值的数量显示div？

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

8以下的值 - 显示div1

值9-12 - 显示div2

值13-17 - 显示div3

值18及更多 - 显示div4

谢谢！我会很高兴有任何帮助！

Answer 1

我已将功能更新为

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

            if (sum < 8) {
                jQuery("#test_result-item_1").show();
            } else if (parseFloat(value) < 12) {
                jQuery("#test_result-item_2").show();
            } else if (parseFloat(value) < 17) {
                jQuery("#test_result-item_3").show();
            } else {
                jQuery("#test_result-item_4").show();
            }



    });
}

检查代码：https://jsfiddle.net/949wzh2m/22/

Answer 2

您正在从代码中调用不同的div，即您尝试阅读的ID不在页面上。逻辑也是冗长和错误的。我已经为它更新了小提琴。逻辑是

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

JSfiddle

Answer 3

这是你在找什么？

＆＃13;

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() {
      $('.test-result-item').hide();
      sum += isNaN(this.value) || $.trim(this.value) === '' ? 0 : parseFloat(this.value);

      jQuery("#totalSum").html(sum);

      if (sum <= 8) {
        $("#test_result_item_1").show();
      } else if ((9 <= sum) && (sum <= 12)) {
        $("#test_result_item_2").show();
      } else if ((13 <= sum) && (sum <= 17)) {
        $("#test_result_item_3").show();
      } else if (sum >= 18) {
        $("#test_result_item_4").show();
      }

    });

  }
});

＆＃13;

HTML中的ID之间存在冲突：

test_result-item_1

以及jQuery中的那些：

test_result_item_1

我还添加了以下行，以便在每次选择时清除divs：

$('.test-result-item').hide();

示例here。

如何根据值的数量显示div

3 个答案: