Javascript 如何在具有相同样式但不同ID的输入元素上使用按钮作为微调器
我正在做一个由用户组成的项目,我正在查询一个SQL数据库以回应所有用户现在我已经对所有内容进行了样式化,每个用户旁边都有一个输入元素,该元素的值从零开始,有两个按钮一使输入元素的值增加(#向上)和减少(#向下)这两个按钮分别充当微调器,我还想为输入元素设置最小值5和最大值500 我尝试了很多“onclick”功能,但都没有用。。。我尝试使用'GetElementById',但这只会更改第一个用户的输入元素的值,我知道这是因为I.D.所以我可以做些什么来更改它 请大家帮忙,谢谢。我是初学者,所以如果我犯了错误,请纠正我,而不是投反对票。 谢谢 以下是HTML:Javascript 如何在具有相同样式但不同ID的输入元素上使用按钮作为微调器,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在做一个由用户组成的项目,我正在查询一个SQL数据库以回应所有用户现在我已经对所有内容进行了样式化,每个用户旁边都有一个输入元素,该元素的值从零开始,有两个按钮一使输入元素的值增加(#向上)和减少(#向下)这两个按钮分别充当微调器,我还想为输入元素设置最小值5和最大值500 我尝试了很多“onclick”功能,但都没有用。。。我尝试使用'GetElementById',但这只会更改第一个用户的输入元素的值,我知道这是因为I.D.所以我可以做些什么来更改它 请大家帮忙,谢谢。我是初学者,所以如
<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>
“$row['username']”
您是否尝试过在输入框中使用简单的HTML5
<input name ="m-maker" name="price" type="number" min="1" max="500" value="5">
这应该足以创建带有微调器的输入框。您不应该需要按钮来增加或减少输入框中的值
下面是注释中要求的关于的示例,下面是您尝试的示例,但使用类而不是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>
您可以按照David Cash的建议使用内置微调器的HTML5输入元素,也可以删除向上/向下箭头的ID以及输入元素本身。它看起来如下所示:
HTML
“$row['username']”
$(函数(){
$(“.up”)。在(“单击”,函数(){
var触发器=$(此);
var输入=trigger.prev();
if(数字(input.val())<500){
input.val(Number(input.val())+1);
}
else{alert(“已达到最大值”);}
});
$(“.down”)。打开(“单击”,函数(){
var触发器=$(此);
var输入=trigger.prev().prev();
如果(数字(input.val())>5){
input.val(Number(input.val())-1);
}
else{alert(“达到最小值”);}
});
}
问题是您有多个具有相同ID的DOM元素,在这种情况下您应该使用类谢谢vn请给我看一个示例@AlonEitanI添加了一个简单而基本的示例,说明如何使用类来实现它。我非常感谢,但它仍然不起作用。您是否将它放在与html相同的页面或不同的页面中。您需要将其包装在$(document).ready()
事件中,这只是将类与jquery一起使用的一般方法的一个简单片段基于您对@Alon Eitan的评论,我们可能需要为您提供代码的完整上下文。我现在就编辑我的答案。@sean尝试将该代码粘贴到html的
$(".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())++ );
});
<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>