Can i make my code shorter?

[Bicklo]

I have a code with links to different pages like this.

Javascript



<script type="text/javascript">

$(document).on("click",".item", function(e) {
var $deel = $(this).text();
if ( $deel == "Statuten"){
$('#uitkomst').load('statuten.php');
}
else if ( $deel == "Boekhouding"){
$('#uitkomst').load('boekhouding.php');
}

else if ( $deel == "Jaarrekening"){
$('#uitkomst').load('jaarrekening.php');
}

else if ( $deel == "Begroting"){
$('#uitkomst').load('begroting.php');
}

else if ( $deel == "Budget opvolgen"){
$('#uitkomst').load('budgetopvolgen.php');
}
e.preventDefault();
});


I have about 34 of those links and I wonder if there's a way to make my code shorter?

[styxlawyer]

Have a look here (http://www.w3schools.com/js/js_switch.asp).

[Bicklo]

Hi, thank you for the link,

This is what I got now


<script type="text/javascript">

$(document).on("click",".item", function(e) {
var $deel = $(this).text();


switch($deel){
case "Statuten":
$('#uitkomst').load('statuten.php');
break;

case "Boekhouding":
$('#uitkomst').load('boekhouding.php');
break;

case "Jaarrekening":
$('#uitkomst').load('jaarrekening.php');
break;

case "Begroting":
$('#uitkomst').load('begroting.php');
break;

case "Budget opvolgen":
$('#uitkomst').load('budgetopvolgen.php');
break;

}
e.preventDefault();
});



</script>

I don't think it can't get any shorter than that.

Thank you for your help.

[molendijk]

You can reduce your code to just a few lines of code

<script type="text/javascript">
$(document).on("click",".item", function(e) {
$('#uitkomst').load($(this).text()+'.php');
e.preventDefault();
});
</script>
provided you make sure that the text for your links is identical to the name of the php-file you want to load except for the php-extension.

So <a class="item" >statuten</a> would load statuten.php, <a class="item" >boekhouding</a> would load boekhouding.php etc.

[jscheuer1]

Or if you want to use upper case letters in the text, but all lower case filenames:


<script type="text/javascript">
$(document).on("click",".item", function(e) {
$('#uitkomst').load($(this).text().toLowerCase() + '.php');
e.preventDefault();
});
</script>

But I'm thinking that using this inside the load function might not work. If not, then:


<script type="text/javascript">
$(document).on("click",".item", function(e) {
var filename = $(this).text().toLowerCase() + '.php';
$('#uitkomst').load(filename);
e.preventDefault();
});
</script>

[Bicklo]

Hi molendijk, this is wonderful it saves me lots of lines.

jscheuer1, I think .toLowerCase() will come in handy later in my code.

Thank you very much gentlemen.

[styxlawyer]

You will also need to remove the space from this case:



case "Budget opvolgen":
$('#uitkomst').load('budgetopvolgen.php');

[Bicklo]

I saw this earlier and made the appropriate changes, thank you anyway.