Can i make my code shorter?

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

Javascript

Code:

---

<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?

Have a look here.

Hi, thank you for the link,

This is what I got now

Code:

---

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

---

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

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.

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

Code:

---

<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:

Code:

---

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

---

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.

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

Code:

---

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

---

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