使用范围输入

时间:2017-10-03 17:56:13

标签: javascript jquery html

我的jquery有问题...该函数适用于其他元素,但不适用于范围输入。我想计算一个值,我需要访问该

的其他值
<input type="range" name="range" id="range" min="0" max="<?php echo $max_range; ?>" oninput="calc_happy()">
<input type="number" name="range" id="ranged" value=""oninput="calc_happy()">
<select name="work_value" id="work_value" onchange="calc_happy()">
  <option value="-1.0">Low work</option>
  <option value="-1.2">Easy work</option>
  <option value="-1.4">Normal work</option>
  <option value="-1.6">Hard work</option>
</select>

这是Js:

<script>
function calc_happy(){
    var selected = $('#work_value').val();
    var ranged = $('#range').val();
    var happy = Math.round(selected*ranged);
    var nhappy = <?php echo $happy-$wood_minus;?>+happy;    

    $('#w_stats td').eq(7).html(Math.abs(happy));
    $('#w_stats td').eq(5).html(selected);
    //calcul new happy
    $('p4').html(nhappy);
    $('p2').html(happy);

    if(nhappy <= 1){
        $('#img').attr("src","../design/images/stats/sad.bmp");
    }
}
</script>
<script>
    window.onload = function() {
        $('#work_value').val('<?php echo $wood_w; ?>');
        $('#range').val('<?php echo $wood_minus/$wood_w; ?>' );
        $('#ranged').val('<?php echo $wood_minus/$wood_w; ?>' );
    }
</script>
<script>
    function putvalue(){
        $('#ranged').val($('#range').val());
    }
    function putvalue2(){
        $('#range').val($('#ranged').val());
    }

</script>

脚本适用于选择输入,但不适用于其他触发器...请注意我的编码不好,我感谢任何建议,并注意它将来。谢谢! 编辑:和一段代码

   window.onload = function() {
        $('#work_value').val('<?php echo $wood_w; ?>');
}

从db接收与选项值匹配的值,但有时是有效的,有时候不是......即使有多次刷新......

2 个答案:

答案 0 :(得分:3)

你可以这样做:

no alert open
Error: An attempt was made to operate on a modal dialog when one was not open.

这是代码。我添加了一些调试代码:

$("#range, #ranged, #work_value").on("change keyup input", calc_happy);
    $(document).ready(function() {
        $('#work_value').val('-1.4');
        $('#range').val('5' );
        $('#ranged').val('7' );

        $("#range, #ranged, #work_value").on("change keyup input", calc_happy);
    })

    function calc_happy(){

        var selected = $('#work_value').val();
        var ranged = $('#range').val();
        var happy = Math.round(selected*ranged);
        var nhappy = 12+happy;    
        
        var $result = $("#result");
        var $newDiv = $("<div />");
        $newDiv.text("selected: " + selected + ", ranged: " + ranged + ", happy: " + happy);
        $result.prepend($newDiv);

        $('#w_stats td').eq(7).html(Math.abs(happy));
        $('#w_stats td').eq(5).html(selected);
        //calcul new happy
        $('p4').html(nhappy);
        $('p2').html(happy);

        if(nhappy <= 1){
            $('#img').attr("src","../design/images/stats/sad.bmp");
        }
    }

    function putvalue(){
      $('#ranged').val($('#range').val());
    }
    function putvalue2(){
      $('#range').val($('#ranged').val());
    }

答案 1 :(得分:-1)

使用oninput代替onchange