javascript - 使用范围输入触发 jquery 的最佳方法

Question

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

从数据库接收与选项值匹配的值，但有时有效，有时无效...即使多次刷新...

Answer 1

你可以这样做:

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

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <input type="range" name="range" id="range" min="0" max="15" />
    <input type="number" name="range" id="ranged" value="" />
    <select name="work_value" id="work_value">
      <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>
    
    <div id="result">
    
    </div>