Как можно было бы упростить скрипт

Question

Подскажите пожалуйста, как можно упростить скрипт

<div id="block4">
    <ul>
        <li class="tb1">1</li>
        <li class="tb2">2</li>
        <li class="tb3">3</li>
    </ul>
</div>

$('.tb1').click(function() {
    $('#block4').removeClass().addClass('tabFon1');
  });
  $('.tb2').click(function() {
    $('#block4').removeClass().addClass('tabFon2');
  });
  $('.tb3').click(function() {
    $('#block4').removeClass().addClass('tabFon3');
  });

Answer 1

Класс, который надо присвоить можно собирать из названия класса li по которому щелкнули.

Например так:

$('li').click(function() {
  $('#block4').removeClass().addClass('tabFon' + this.className.match(/\d/));
});

.tabFon1 {
  border: 1px solid red;
  background-color: red;
}
.tabFon2 {
  border: 1px solid green;
  background-color: green;
}
.tabFon3 {
  border: 1px solid blue;
  background-color: blue;
}
li {
  border: 1px solid black;
  background-color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="block4">
  <ul>
    <li class="tb1">1</li>
    <li class="tb2">2</li>
    <li class="tb3">3</li>
  </ul>
</div>

Answer 2

$('#block4 ul li').click(function() {
    var n = $(this).attr('class').match(/\d+/);
    $('#block4').removeClass().addClass('tabFon' + n);
});

Answer 3

можно еще вот так попробовать

for(var i = 1; i <= $('li').length; i++){
    $('.tb'+i).click((function(i){
        return function () {
            $('#block4').removeClass().addClass('tabFon'+i)
        }
} )(i))}

Answer 4

Случайно прочитал тут про новую фичу let

for(let i = 1; i <= 3; i++){
    $('.tb' + i).click(function() {
        $('#block4').removeClass().addClass('tabFon' + i);
    });
}