我正在开发一个由用户组成的项目,我正在查询SQL数据库以回显所有用户现在我已经设置了所有内容,并且每个用户旁边都有一个输入元素,其值为零,并且是两个按钮,分别使输入元素的值增加(#up)和减少(#down)。所以这两个按钮充当微调器,我也想设置最小值5和最大值500对于输入元素。
我已经尝试了许多' onclick'功能都无济于事...我尝试使用' GetElementById'但这只会改变第一个用户的输入元素的值,我知道这是因为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>
答案 0 :(得分:1)
你可以像David Cash建议的那样做,并利用内置微调器的HTML5输入元素,或者你可以从上/下箭头以及输入元素本身中删除ID。它看起来如下:
<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>
答案 1 :(得分:0)
您是否尝试过将简单的HTML 5用于输入框?
<input name ="m-maker" name="price" type="number" min="1" max="500" value="5">
这应该足以用旋转器创建输入框。您不需要按钮来增加或减少输入框中的值。
以下是Plunker
的示例答案 2 :(得分:0)
根据评论中的要求,以下是您尝试过的示例,但使用的是课程而不是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())++ );
});