Mooie - [0] + button
Ik ben bezig om een mooie input type=number te maken.
Wat ik wil is dat het moet lijken op dit...
- [1] +
Maar dan natuurlijk met style :P
Wat ik tot nu toe heb is dit...
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="javascript">
$(document).ready(function(){
var value = $('.inputNumber').find('input').val();
$('#minus').on("click", function(){
value.val(value.val()-=1);
});
$('#plus').on("click", function(){
value.val(value.val()+=1);
});
});
</script>
<style>
input{
font-size: 25px;
width: 45px;
border-radius: 3px;
background-color: #eff4f1;
padding: 2px;
text-align: center;
}
a.minus, a.plus{
cursor: pointer;
font-size: 25px;
color: orange;
font-weight: bold;
}
</style>
</head>
<body>
<div class="inputNumber">
<a class="minus" id="minus">-</a>
<input type="text" id="field" value="0">
<a class="plus" id="plus">+</a>
<a id="test"></a>
</div>
</body>
</html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="javascript">
$(document).ready(function(){
var value = $('.inputNumber').find('input').val();
$('#minus').on("click", function(){
value.val(value.val()-=1);
});
$('#plus').on("click", function(){
value.val(value.val()+=1);
});
});
</script>
<style>
input{
font-size: 25px;
width: 45px;
border-radius: 3px;
background-color: #eff4f1;
padding: 2px;
text-align: center;
}
a.minus, a.plus{
cursor: pointer;
font-size: 25px;
color: orange;
font-weight: bold;
}
</style>
</head>
<body>
<div class="inputNumber">
<a class="minus" id="minus">-</a>
<input type="text" id="field" value="0">
<a class="plus" id="plus">+</a>
<a id="test"></a>
</div>
</body>
</html>
Alleen hij wil niks veranderen.
Hoop dat jullie me hiermee kunnen helpen.
Toevoeging op 05/03/2015 09:51:13:
Ik heb hem ook op JSFiddle ingevoerd: https://jsfiddle.net/jx6hoa5r/14/
Gewijzigd op 05/03/2015 09:51:38 door Mathieu Posthumus
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
$(document).ready(function(){
var fieldValue = parseInt($('.inputNumber').find('input').val(), 10);
console.log(fieldValue)
$('#minus').on("click", function(){
$('#field').val(fieldValue = fieldValue - 1);
});
$('#plus').on("click", function(){
$('#field').val(fieldValue = fieldValue + 1);
});
});
var fieldValue = parseInt($('.inputNumber').find('input').val(), 10);
console.log(fieldValue)
$('#minus').on("click", function(){
$('#field').val(fieldValue = fieldValue - 1);
});
$('#plus').on("click", function(){
$('#field').val(fieldValue = fieldValue + 1);
});
});
Asjeblieft :)
Maar wat had ik fout gedaan dan?
Alleen nu heb ik een ander probleem want ik had het getest in jsFiddle daar werkte het wel maar in mijn localhost niet :( en het is precies hetzelfde!
Toevoeging op 05/03/2015 10:14:25:
Laat maar het werkt al. (alleen weet ik niet wat het was :s)
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
$('.inputNumber').each(function(event) {
var wrapper = $(this);
var wrapperInput = $('input', wrapper);
$('a', wrapper).bind('click', function(event) {
if ($(this).hasClass('minus')) {
wrapperInput.val(parseInt(wrapperInput.val()) - 1);
} else if ($(this).hasClass('plus')) {
wrapperInput.val(parseInt(wrapperInput.val()) + 1);
}
return false;
});
});
var wrapper = $(this);
var wrapperInput = $('input', wrapper);
$('a', wrapper).bind('click', function(event) {
if ($(this).hasClass('minus')) {
wrapperInput.val(parseInt(wrapperInput.val()) - 1);
} else if ($(this).hasClass('plus')) {
wrapperInput.val(parseInt(wrapperInput.val()) + 1);
}
return false;
});
});
Waarom je code niet werkt komt denk ik doordat je .html() gebruikt en dat een input .html() niet ondersteund ivm .val()
Gewijzigd op 05/03/2015 13:27:20 door Joakim Broden