Question

您好我想创建加号减号按钮来更改范围值这是我的HTML：

<label for="points">Width:</label>

<input type="range" name="amountRange" id="points" value="100" min="10" max="100" step="1" oninput="this.form.amountInput.value=this.value" />
<input type="text" name="amountInput" id="textnumber" min="10" max="100" step="1" value="100" oninput="this.form.amountRange.value=this.value" /><span>%</span>
<input type="button" id="plus" value="+" />
<input type="button" id="minus" value="-" />

我已经尝试了

var counter = document.getElementById("points").value;
$(document).ready(function () {
        $('#minus').click(function () {
            counter++;
        });
        $('#points').change(function () {
            $('#navi').css({
                width: this.value + '%'
            });
        });

Answer 1

这是一个解决方案，一切正常：

http://jsfiddle.net/kgLsky8s/2/

var counter = document.getElementById("points").value;

$(document).ready(function () {

    $("#plus").click(function(){

        var newValuePlus = parseInt($("#textnumber").val()) + 1;
        if ( newValuePlus > 100 ) return;

        $("#points, #textnumber").val(newValuePlus);

    });


    $("#minus").click(function(){

        var newValueMinus = parseInt($("#textnumber").val()) - 1;
        if ( newValueMinus < 0 ) return;

        $("#points, #textnumber").val(newValueMinus);
    }); 

    $("#points").change(function(){

        var newValue = $(this).val();
        $("#textnumber").val(newValue);

    }); 

    $("#textnumber").change(function(){

        var newValue = $(this).val();
        $("#points").val(newValue);

    }); 

});

Answer 2

一个很好的选择是使用jQuery UI的微调器小部件。记得先导入jQuery，然后再导入jQuery UI。确保您也导入了jQuery UI的CSS链接。然后使用此javascript代码：

$( document ).ready( function() {
    $( "#spinner" ).spinner();
});

此外，将要转换的元素的ID设置为微调器窗口小部件（最好是输入），如下所示：

<input id="spinner" type="text">

Answer 3

你需要使用jQuery的.attr()函数......就像这样：

$("#plus").click(function(){

    $("#points, #textnumber").attr("value", parseInt($("#points").attr("value")) + 1); 

});


$("#minus").click(function(){

    $("#points, #textnumber").attr("value", parseInt($("#points").attr("value")) - 1); 

});

jQuery add plus减去按钮，用于更改div宽度的范围

3 个答案: