javascript - 如何设置 number_field_tag 的样式

Question

关闭。此题需要 details or clarity 。目前不接受答案。

---

想要改进这个问题吗？通过 editing this post 添加详细信息并澄清问题.

已关闭 7 年前。

Improve this question

我有产品数量的 number_filed_tag，它应该看起来像

+1-

如何在 number_field_tag 附近制作自定义 +、- 按钮？

Answer 1

您可以使用 <input type="number"> 。查看JSFiddle

但是，按钮不会显示 +1或-1 ，它们只是箭头

但是，您可以做的是添加箭头图像并使用 Javascript/jQuery 更改值。我做了一个JSFiddle进行演示，或查看下面的代码片段

$('.up').on('click', function() {
	var value = $(this).prev().val()
    $(this).prev().val(parseInt(value) + 1)
})

$('.down').on('click', function() {
	var value = $(this).prev().prev().val()
    $(this).prev().prev().val(parseInt(value) - 1)
})

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="number" value=10>
<span class="glyphicon glyphicon-arrow-up up"></span>
<span class="glyphicon glyphicon-arrow-down down"></span>