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?
haha in mijn ervaring werkt += en -= niet helemaal lekker. O en je schrijft de warde niet terug naar het veld. Bijvoorbeeld op regel 8. value is daar een refferentie naar de waarde in je input veld, niet het input veld zelf
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