javascript - 如何设置 number_field_tag 的样式

标签 javascript jquery ruby-on-rails ruby

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

+1-

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

最佳答案

您可以使用 <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>

关于javascript - 如何设置 number_field_tag 的样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34974962/

相关文章:

javascript - 使用 Rails 和 jQuery 在局部动态渲染 View

ruby-on-rails - 如何使用 Rspec 测试强参数?

javascript - 使用 JavaScript 而非 AppleScript 实现自动化的邮件规则

javascript - 简单问题 : Safari and CSS/Javascript Rollovers

jquery - 使用each获取jQuery中的元素值

javascript - 如何将输入文本插入图像?

javascript - 使用 javascript 函数在客户端允许ColumnResize

ruby-on-rails - 如何在 ruby​​ on rails 中创建邀请好友?

javascript - document.getElementById() 的返回类型是什么

Visual Studio 2013 中的 JavaScript HTML5 CSS3 元素模板