jQuery为改变div宽度添加加减按钮的范围

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 + '%'
            });
        });

- David Kern

---

那么问题出在哪里呢？ - T J

请展示您尝试过的代码。 - iCollect.it Ltd

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

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

    }); 

});

- Monte

---

只有一个最后的问题，我需要添加我的div代码来使用计数器更改它，这是代码：$('#navi').css({ width: this.value + '%' }); - David Kern

在每个单独的块中：就像这样：http://jsfiddle.net/kgLsky8s/4/ - Monte

你好Monte，我正在尝试让这行代码的宽度显示为百分数。在代码末尾，我添加了一个百分号，但是范围不起作用。当我添加了百分号后，您能帮助我吗？var newValuePlus = parseInt($("#textnumber").val() + '%') + 1 + '%'; - David Kern

像这样的吗？http://jsfiddle.net/kgLsky8s/5/ - Monte

Answer 2

你需要使用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); 

}); 

- rm-vanda

---

好的，很棒。如果我想要更改宽度呢？ - David Kern

嗯，是的，我只是在JSFiddle上玩弄它 - 给我一分钟... - rm-vanda

这实际上变得相当复杂 - Monte的答案将是最好的。由于您为用户提供了三个输入相同值的选项（范围、文本、按钮）- 因此每个输入都需要更新其他输入。 - rm-vanda

Answer 3

一个很好的选择是使用jQuery UI的spinner小部件。记得先导入jQuery，然后再导入jQuery UI。确保也导入了jQuery UI的CSS链接。然后使用这段JavaScript代码：

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

此外，将要转换为旋转器小部件的元素的ID设置为以下格式（最好是输入）：

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

- Okx

---

谢谢您的评论，但我不明白您试图向我解释什么 :) - David Kern