Mooie - [0] + button

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Senior DevOps-ontwikkelaar eIDAS

Functie­omschrijving Burgers en bedrijven veilig en betrouwbaar digitaal toegang geven tot diensten en producten van het ministerie van Economische Zaken en Klimaat. Als senior DevOps-ontwikkelaar bouw je daar letterlijk aan mee. En dat doe je bij DICTU: een van de grootste en meest vooruitstrevende ICT-dienstverleners van de Rijksoverheid. Jij werkt mee aan de doorontwikkeling van eIDAS, dat staat voor Electronic IDentification Authentication and trust Services. Deze koppeling maakt de grensoverschrijdende authenticatie op overheidswebsites binnen de Europese Unie mogelijk. Het ministerie van Economische Zaken en Klimaat heeft één moderne toegangspoort voor zijn diensten en inspecties. Enkele daarvan zijn dankzij eIDAS inmiddels

Bekijk vacature »

Front-end Developer Vue.js Meewerkend voorman

Functieomschrijving Ben jij een ervaren Front-end Developer, bedreven in Vue.js en lijkt het jou gaaf om als meewerkend voorman verantwoordelijk te zijn voor de ontwikkeling van drie junior ontwikkelaars? Werk jij graag aan diverse projecten t.b.v. het vergroten van klant- en medewerkerbeleving? Lee dan snel verder! Het onderhouden, ontwikkelen en testen van front-end software van diverse klant- en medewerkersapplicaties; Het ontwikkelen van maatwerk front-end oplossingen in Vue.js en participeren in een scrumteam; Verantwoordelijk voor het begeleiden en coachen van drie junior front-end developers; Verantwoordelijk voor code-reviews en het opstellen van de juiste documentatie zoals userstories en api ontwerp; Participeren in

Bekijk vacature »

Mathieu Posthumus

Mathieu Posthumus

05/03/2015 09:36:07
Quote Anchor link
Hey mensen.

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)
PHP script in nieuw venster Selecteer het PHP script
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
<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
 
PHP hulp

PHP hulp

04/08/2020 10:10:53
 
Jacco Engel

Jacco Engel

05/03/2015 10:05:33
Quote Anchor link
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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);
    });
    
});


Asjeblieft :)
 
Mathieu Posthumus

Mathieu Posthumus

05/03/2015 10:06:30
Quote Anchor link
Dankje Jacco,

Maar wat had ik fout gedaan dan?
 
Jacco Engel

Jacco Engel

05/03/2015 10:11:07
Quote Anchor link
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
 
Mathieu Posthumus

Mathieu Posthumus

05/03/2015 10:12:44
Quote Anchor link
Oke top, dankje voor de uitleg ;)

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)
 
Joakim Broden

Joakim Broden

05/03/2015 13:26:24
Quote Anchor link
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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;
        });
});


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
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.