如何在具有相同样式但不同 ID 的输入元素上使用按钮作为微调器
How to use buttons as spinners on input elements with same style but different I.Ds
我正在处理一个由用户组成的项目,我正在查询一个SQL数据库以回显所有用户,现在我已经设置了所有内容的样式,并且每个用户旁边都有一个输入元素,从零值开始,有两个按钮一个使输入元素的值分别增加(#up)和减少(#down)。因此,这两个按钮充当微调器,我还想为输入元素设置最小值 5 和最大值 500。
我已经尝试了许多"点击"功能都无济于事......我尝试使用"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>
您可以按照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>
您是否尝试过仅使用简单的HTML 5作为输入框?
<input name ="m-maker" name="price" type="number" min="1" max="500" value="5">
这应该足以创建带有微调器的输入框。 您不需要按钮来增加或减少输入框中的值。
这是关于Plunker的一个例子
根据评论中的要求,以下是您正在尝试的示例,但使用类而不是 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())++ );
});
相关文章:
- 是否有任何可能的原因使我应该指定类型=“”;按钮“;用于我的按钮元素
- jquery点击事件不会在iPhone中的按钮元素上触发
- 如何使用jQuery从DOM中删除所有单选按钮元素
- 按钮元素没有响应
- 使用 JavaScript 获取按钮元素和样式按钮
- 获取单选按钮元素的span子项
- 如何使用 JavaScript 操作 html 按钮元素的“onclick”事件
- 使用 BeautifulSoup 解析 Javascript 按钮元素中的 HTML
- 如何使下拉列表展开单击按钮元素
- 在 JS 的单选按钮元素 (HTML) 中使用 title 属性
- 无法在无头模式下使用 watir Webdriver 执行按钮元素的 onclick 事件 javascript
- 如何从页面上的按钮元素中删除禁用
- 如何使用 JavaScript 将输入提交元素转换为按钮元素
- JQuery 按属性选择按钮元素
- 如何将对象存储到数组中,然后在create按钮元素中显示所有对象
- 正在创建带有文本的按钮元素
- 更改当前按钮元素的类
- 单击函数中的按钮元素,JavaScript
- 如何将JavaScript应用于引导程序btn组以选择/取消选择子按钮元素
- 初始化DIV中的按钮元素