Javascript korter maken

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Lano Heeren

Lano Heeren

16/06/2012 18:25:51
Quote Anchor link
Hallo,
Heb onderstaande code gemaakt om velden te vergelijken, mochten er 2 of meerdere velden met de zelfde inhoud zijn, dan krijg je een foutmelding. De code werkt goed maar ik vind de code te lang. Heeft iemand een tip of voorbeeldje hoe de code korter kan?
Alvast bedankt voor de reacties.
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
41
function opslaan(){

if ($("#num1").val() == '' || $("#num2").val() == '' || $("#num3").val() == '' || $("#num4").val() == '' || $("#num5").val() == ''){
$("#foutje").html(leeg);
foutje.style.display = "block";
return false;
}

if ($("#num1").val() == $("#num2").val() || $("#num1").val() == $("#num3").val()  || $("#num1").val() == $("#num4").val() || $("#num1").val() == $("#num5").val()){
$("#foutje").html(foutje);
foutje.style.display = "block";
return false;
}

if ($("#num2").val() == $("#num1").val() || $("#num2").val() == $("#num3").val()  || $("#num2").val() == $("#num4").val() || $("#num2").val() == $("#num5").val()){
$("#foutje").html(foutje);
foutje.style.display = "block";
return false;
}

if ($("#num3").val() == $("#num2").val() || $("#num3").val() == $("#num1").val()  || $("#num3").val() == $("#num4").val() || $("#num3").val() == $("#num5").val()){
$("#foutje").html(foutje);
foutje.style.display = "block";
return false;
}

if ($("#num4").val() == $("#num2").val() || $("#num4").val() == $("#num1").val()  || $("#num4").val() == $("#num3").val() || $("#num4").val() == $("#num5").val()){
$("#foutje").html(foutje);
foutje.style.display = "block";
return false;
}

if ($("#num5").val() == $("#num2").val() || $("#num5").val() == $("#num1").val()  || $("#num5").val() == $("#num3").val() || $("#num5").val() == $("#num4").val()){
$("#foutje").html(foutje);
foutje.style.display = "block";
return false;
}



}
Gewijzigd op 16/06/2012 18:58:26 door Lano Heeren
 
PHP hulp

PHP hulp

26/12/2024 14:34:07
 
Robert Stevens

Robert Stevens

16/06/2012 19:15:57
Quote Anchor link
als ik het goed zie is het enige wat verandert #num
dus het enige dat je hoeft te doen is een fucntie te schrijven waarbije je dat kan invoeren
 
Wouter J

Wouter J

16/06/2012 20:10:34
Quote Anchor link
Tevens kost dit scriptje van jou heel veel onnodige tijd. Want je laat JavaScript nu zo'n 9x de hele DOM (waar alle elementen instaan) doorzoeken naar #num5. Dat is 8 keer teveel.

Beter is het dan om het op te slaan in een variabele:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
var num1 = $('#num1'),
    num2 = $('#num2'),
    /* enz */;


Ook heb je van elk element alleen de value nodig, dus kan je ook alleen die value opslaan:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
var num1 = $('#num1').val(),
    num2 = $('#num2').val(),
    /* enz */;


En als je dan toch al jQuery gebruikt doe dan i.p.v. foutje.style.display = 'block' gewoon foutje.css('display', 'block').

Ook geef je altijd return false, waarom die dan niet uit de if statement halen en gewoon onderin de functie plaatsen?

Alle if statements doen hetzelfde, waarom die dan niet allemaal bij elkaar voegen?

Tevens zal ik ook alle waardes in een array zetten. Dan kun je heel simpel met jQuery.inArray() al die OR's vervangen.
Enige probleem is dan dat je de waarde van de value waarmee je checkt niet meerekent, maar dat is op te lossen met een simpel if je.

Hoe ik het dus zou maken:
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
function opslaan() {
    // sla values op in een array
    var values = [
        $('#num1').val(),
        $('#num2').val(),
        $('#num3').val(),
        $('#num4').val(),
            $('#num5').val()
    ];
    var foutje = $('#foutje');
    var foutmelding = 'Een foutje...';
    
    if (   (jQuery.inArray(values[0], values) !== 0 || jQuery.inArray(values[0], values, 1) !== -1)
        || (jQuery.inArray(values[0], values) !== 1 || jQuery.inArray(values[0], values, 2) !== -1)
        || (jQuery.inArray(values[0], values) !== 2 || jQuery.inArray(values[0], values, 3) !== -1)
        || (jQuery.inArray(values[0], values) !== 3 || jQuery.inArray(values[0], values, 4) !== -1)
        || (jQuery.inArray(values[0], values) !== 4 || jQuery.inArray(values[0], values, 5) !== -1)
        || (jQuery.inArray(values[0], values) !== 5)
       ) {
        foutje.html(foutmelding).css('display', 'block');
    }
    return false;
}
Gewijzigd op 16/06/2012 20:11:08 door Wouter J
 
Lano Heeren

Lano Heeren

16/06/2012 21:00:33
Quote Anchor link
Wouter, bedankt voor je uitgebreide uitleg en uitwerking. Het werkt prima, nogmaals bedankt Wouter.
Gewijzigd op 16/06/2012 21:21:04 door Lano Heeren
 



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.