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.

[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.