我正在开发一个由用户组成的元素,我正在查询一个 SQL 数据库以回应所有用户,现在我已经设置了所有样式,每个用户旁边都有一个输入元素,它从零开始,并且有两个按钮 1使输入元素的值分别增加(#up)和减少(#down)。所以这两个按钮充当微调器,我还想为输入元素设置最小值 5 和最大值 500 .
我已经尝试了很多'onclick'功能都无济于事......我尝试使用'GetElementById'但这只会改变第一个用户的输入元素的值而且我知道这是因为ID所以什么可以我要改变这个
感谢所有帮助。我是初学者,所以如果我犯了错误,请纠正我而不是投反对票。 谢谢。
这是 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>
最佳答案
您可以按照 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>
关于javascript - 如何在具有相同样式但不同 ID 的输入元素上将按钮用作微调器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34886969/