HTML

Question

我正在开发一个由用户组成的项目，我正在查询SQL数据库以回显所有用户现在我已经设置了所有内容，并且每个用户旁边都有一个输入元素，其值为零，并且是两个按钮，分别使输入元素的值增加（#up）和减少（#down）。所以这两个按钮充当微调器，我也想设置最小值5和最大值500对于输入元素。

我已经尝试了许多＆＃39; onclick＆＃39;功能都无济于事...我尝试使用＆＃39; GetElementById＆＃39;但这只会改变第一个用户的输入元素的值，我知道这是因为I.D.so我该怎么做才能改变这个

请所有帮助表示赞赏。我是一个初学者，所以如果我犯了错误，请纠正我，而不是低估。感谢。

这是HTML：

               <span class = 'username'>".$row['username']."</span>
               <form name = 'matchcreator' id='amount' action='arena.php' method ='post'>
               <input  name = 'm-maker' type = 'text' id='price'  maxlength = '15' value='0'/>
               <button id='up' type ='button' ><img src='images/up.png'  width='10px' height='10px' href='#'> </button>
               <button id='down' type ='button' '><img src='images/down.png' width='10px' height='10px' href='#'></button>
                </form>

Answer 1

你可以像David Cash建议的那样做，并利用内置微调器的HTML5输入元素，或者你可以从上/下箭头以及输入元素本身中删除ID。它看起来如下：

HTML

    <span class = 'username'>".$row['username']."</span>
    <form name = 'matchcreator' id='amount' action='arena.php' method ='post'>
        <input  name = 'm-maker' type = 'text' class='price'  maxlength = '15' value='0'/>
        <button class='up' type ='button'><img src='images/up.png'  width='10px' height='10px' href='#'> </button>
        <button class='down' type ='button'><img src='images/down.png' width='10px' height='10px' href='#'></button>
    </form>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script>
    $(function () {
    $(".up").on("click", function () {
        var trigger = $(this);
        var input = trigger.prev();
        if (Number(input.val()) < 500) {
            input.val(Number(input.val()) + 1);
        }
        else { alert("max value reached"); }
    }); 
    $(".down").on("click", function () {
        var trigger = $(this);
        var input = trigger.prev().prev();
        if (Number(input.val()) > 5) {
            input.val(Number(input.val()) - 1);
        }
        else { alert("min value reached"); }
    });
    }
</script>

Answer 2

您是否尝试过将简单的HTML 5用于输入框？

<input name ="m-maker" name="price" type="number" min="1" max="500" value="5">

这应该足以用旋转器创建输入框。您不需要按钮来增加或减少输入框中的值。

以下是Plunker

的示例

Answer 3

根据评论中的要求，以下是您尝试过的示例，但使用的是课程而不是ID

<form name = 'matchcreator' class='amount' action='arena.php' method ='post'>
           <input  name = 'm-maker' type = 'text' class='price'  maxlength = '15' value='0'/>
           <button class='up' type ='button' ><img src='images/up.png'  width='10px' height='10px' href='#'> </button>
           <button class='down' type ='button' '><img src='images/down.png' width='10px' height='10px' href='#'></button>
 </form>

jQuery示例：

$(".down").on("click", function() {
    var input = $(this).prev(".price");
    input.val( parseInt(input.val())-- );
});

$(".up").on("click", function() {
    var input = $(this).prev(".price");
    input.val( parseInt(input.val())++ );
});

如何在具有相同样式但不同的I.Ds的输入元素上使用按钮作为微调器

3 个答案:

HTML