Verkorte code
Ben zojuist bezig geweest om jquery beter onder de knie te krijgen.
Nu heb ik een error functie gemaakt maar vroeg me af of ik dit misschien in een korte code kon maken
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function error(){
$("#send").click(function(e){
if(!$("#dataeen").val()){
$("#dataeen").css("border-bottom-color", "#FF0000");
}else{
$("#dataeen").css("border-bottom-color", "#CCCCCC");
}
if(!$("#datatwee").val()){
$("#datatwee").css("border-bottom-color", "#FF0000");
}else{
$("#datatwee").css("border-bottom-color", "#CCCCCC");
}
e.preventDefault();
});
}
$("#send").click(function(e){
if(!$("#dataeen").val()){
$("#dataeen").css("border-bottom-color", "#FF0000");
}else{
$("#dataeen").css("border-bottom-color", "#CCCCCC");
}
if(!$("#datatwee").val()){
$("#datatwee").css("border-bottom-color", "#FF0000");
}else{
$("#datatwee").css("border-bottom-color", "#CCCCCC");
}
e.preventDefault();
});
}
als ik nu 10 input velden heb word het een behoorlijk lange code.
Zou ik hier met een each functie kunnen werken zodat jquery het rijtje afgaat?
Gr. Yoeri
b.v.
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
function vak_inkleuren(veldnaam, kleurcode)
{
if(!$(veldnaam).val()){
$(veldnaam).css("border-bottom-color", kleurcode);
}else{
$(veldnaam).css("border-bottom-color", kleurcode);
}
}
{
if(!$(veldnaam).val()){
$(veldnaam).css("border-bottom-color", kleurcode);
}else{
$(veldnaam).css("border-bottom-color", kleurcode);
}
}
Deze functie roep je dan x keer aan bijvoorbeeld.
- Probeer zo min mogelijk styling te doen, laat dat over aan CSS. Gebruik bijv. classes
- Probeer zo min mogelijk de hele DOM tree door te zoeken
Wanneer we de eerste best-practice toepassen maken we bijvoorbeeld 2 CSS classes aan:
Code (css)
1
2
2
.field--error { border-bottom-color:#ff0000; }
.field--default { border-bottom-color:#cccccc; }
.field--default { border-bottom-color:#cccccc; }
Nu kunnen we deze toevoegen met jQuery:
Code (js)
1
2
3
4
5
2
3
4
5
if (!$('#dataeen').val()) {
$('#dataeen').removeClass('field-default').addClass('field-error');
} else {
$('#dataeen').removeClass('field-error').addClass('field-default');
}
$('#dataeen').removeClass('field-default').addClass('field-error');
} else {
$('#dataeen').removeClass('field-error').addClass('field-default');
}
Dit kunnen we versimpelen door jQuery's toggleClass() functie te gebruiken:
Code (js)
1
2
3
2
3
// class wordt toegevoegd wanneer het 2e argument true is en wordt verwijderd wanneer dit false is
// dit betekend dat border-bottom-color:#cccccc; de default border-bottom kleur van de veldjes moet worden
$('#dataeen').toggleClass('field-error', !$('#dataeen').val());
// dit betekend dat border-bottom-color:#cccccc; de default border-bottom kleur van de veldjes moet worden
$('#dataeen').toggleClass('field-error', !$('#dataeen').val());
Nu zie je dat we 2 keer $('#dataeen') hebben. Dit betekend dat JavaScript 2 maal alle elementen van de pagina (DOM tree) moet doorzoeken om een element te vinden. Je kan begrijpen dat dit met een grote pagina best wat tijd kan kosten. Het is dus beter om dit element op te slaan in een variabele en deze dan te gebruiken:
Code (js)
1
2
3
2
3
var dataeenElem = $('#dataeen');
dataeenElem.toggleClass('field-error', !dataeenElem.val());
dataeenElem.toggleClass('field-error', !dataeenElem.val());
Nu kunnen we dit nog beter maken, omdat de functie nu alsnog elke keer dat het wordt aangeroepen opzoek moet gaan naar de elementen. Dus kun je beter deze variabele globaal opslaan: (globaal is eigenlijk niet goed, maar dit lokaal maken gaat nu nog een beetje te ver)
Code (js)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
var dataeenElem = $('#dataeen');
var datatweeElem = $('#datatwee');
$('#send').click(function (e) {
e.preventDefault();
dataeenElem.toggleClass('field--error', !dataeenElem.val());
datatweeElem.toggleClass('field--error', !datatweeElem.val());
});
var datatweeElem = $('#datatwee');
$('#send').click(function (e) {
e.preventDefault();
dataeenElem.toggleClass('field--error', !dataeenElem.val());
datatweeElem.toggleClass('field--error', !datatweeElem.val());
});
Nu zie je dat je alsnog 2 regels hebt die nagenoeg hetzelfde zijn. Dit zou je ook weer kunnen abstraheren in een nieuwe functie, maar dat lijkt me een tikkeltje overkill.
Kijk trouwens eens naar het onsubmit event (.submit()). Dat is iets beter dan het click event op een submit button.
Gewijzigd op 21/10/2015 22:04:38 door Wouter J
Daarmee bereik je dat je niet elke id apart hoeft te vermelden:
je maakt een lus die door alle elementen met class="nietleeg" loopt en als zo'n element dan leeg is, geef je daar de opmaak class field-error aan. (oj juist niet aks gevuld)
Scheelt je een (kleine) handeling voor javascript.
Je script stopt nu sowieso, ook als er wel alle velden ingevuld zijn. Is dat de bedoeling?
ik zou het schrijven als:
@ivo
Wat bedoel je precies met:
Betekend dat als de waarde meer dan 0 is dat hij de code niet weer opnieuw hoeft uit te voeren?
Of betekend "return false iets anders?
Als dat het geval is, zijn er dus elementen die leeg zijn en dus mogen we niet door met het submitten.
vergelijkbaar met preventDefault(). Maar jouw preventDefault gaat volgens mij altijd af.