Using jQuery to change the same function where the class is class_01, class_02

Question

I have 20 classes classname_01 to classname_20 I wold rather not have to write the same code 20 times because of the _00 in the class name. The sample of my code is:

$('.tab_01').on('click',function(e) {
    $('#interactive_folder span').removeClass().addClass('folder_01');
    $(hideus).hide();
    $('img.folder_info_01 , .cte_01').show();
    e.preventDefault();
});
$('.tab_02').on('click',function(e) {
    $('#interactive_folder span').removeClass().addClass('folder_02');
    $(hideus).hide();
    $('img.folder_info_02 , .sub_title_02 , .cte_02').show()
    e.preventDefault();
});

Could someone advise a way to increment the number on the class names.

Edit Adding HTML

<div id="legend">
        <table id="layout_table" role="presentation">
        <tbody>
        <tr>
            <td><p data-id="01" class="legend_icon icon_01 tab">Legend 01</p></td>
            <td><p data-id="02" class="legend_icon icon_02 tab">Legend 02</p></td>
            <td><p data-id="03" class="legend_icon icon_03 tab">Legend 03</p></td>
        </tr>
        <tr>
            <td><p data-id="04" class="legend_icon icon_04 tab">Legend 04</p></td>
            <td><p data-id="05" class="legend_icon icon_05 tab">Legend 05</p></td>
            <td><p data-id="06" class="legend_icon icon_06 tab">Legend 06</p></td>
        </tr>
        </tbody>
        </table>
        </div>
      <div id="interactive_folder">
      <p class="folder_title">REPORT</p>
        <span class="folder_01"></span>
        <img src="../../img/folder_info_01.png" alt="" class="folder_info_01" width="457" height="524" />
        <div class="cte_01"><a class="popup_extlarge" href="" target="_blank"><img src="../../img/enlarge-01.png" width="175" height="108"></a></div>
        <p class="sub_title_02">Title 01</p>
        <div class="cte_02"><a class="popup_extlarge" href="" target="_blank"><img src="../../img/enlarge-02.png" width="175" height="108"></a></div>
        <img src="../../img/folder_info_02.png" class="folder_info_02" width="451" height="213" />
        <p class="sub_title_03">Title 02</p>
        <div class="cte_03"><a class="popup_extlarge" href="../../img/expense-budget-cost-centres.png" target="_blank"><img src="../../img/enlarge-03.png" width="175" height="108"></a></div>
        <img src="../../img/folder_info_03.png" class="folder_info_03" width="467" height="366" />
        <p class="sub_title_04">Title 03</p>
        <div class="cte_04"><a class="popup_extlarge" href="../../img/expense-budget-cost-centres.png" target="_blank"><img src="../../img/enlarge-04.png" width="175" height="108"></a></div>
        <img src="../../img/folder_info_04.png" class="folder_info_04" width="467" height="156" />
        <p class="sub_title_05">Title 04</p>
        <div class="cte_05"><a class="popup_extlarge" href="../../img/expense-budget-cost-centres.png" target="_blank"><img src="../../img/enlarge-05.png" width="175" height="108"></a></div>
        <img src="../../img/folder_info_05.png" class="folder_info_05" width="466" height="140" />
        <p class="sub_title_06">Title 05</p>
        <div class="cte_06"><a class="popup_extlarge" href="../../img/expense-budget-cost-centres.png" target="_blank"><img src="../../img/enlarge-06.png" width="175" height="108"></a></div>
        <img src="../../img/folder_info_06.png" class="folder_info_06" width="466" height="135" />
      </div>

New code is

var hideus = $('.folder_info_01, .folder_info_02, .folder_info_03, .folder_info_04, .folder_info_05, .folder_info_06, .sub_title_02, .sub_title_03, .sub_title_04, .sub_title_05, .sub_title_06, .cte_01, .cte_02, .cte_03, .cte_04, .cte_05, .cte_06');

$(hideus).hide();
$('.folder_info_01 , .cte_01').show();


$('.tab').on('click',function(e) {
    e.preventDefault();

    var $this = $(this),
        suffix = $this.data("id");

    $('#interactive_folder span').removeClass().addClass('folder_' + suffix );
    $(hideus).hide();
    $('img.folder_info_' + suffix + ' , .cte_' + suffix).show();
});

Answer 1

In case you do not want to change source code you can use:

$('[class^=tab_]').on('click', function(e) {
    e.preventDefault();
    $('img[class^=folder_info_], [class^=cte_]').hide();
    var thisNumber=$(this).attr('class').replace('tab_', '');
    $('#interactive_folder span').removeClass().addClass('folder_' + thisNumber);
    $('img.folder_info_' + thisNumber + ', .cte_' + thisNumber).show();
});

.folder_01 {
    color: red;
}
.folder_02 {
    color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
    <li class="tab_01">TAB 01 (click me)</li>
    <li class="tab_02">TAB 02 (click me)</li>
</ul>

<div id="interactive_folder"><span>Span</span></div>

<img class="folder_info_01" style="display: none;" src="http://placehold.it/350x150" />
<div class="cte_01" style="display: none;">CTE 01</div>

<img class="folder_info_02" src="http://placehold.it/150x150" style="display: none;" />
<div class="cte_02" style="display: none;">CTE 02</div>

Note: My guess those are only classes for elements you target. If you have more than class, than the script would be little bit complicated.

Note 2: I am 100% sure this is not a correct way of coding. If you post your html code, than you will get much better answer.

Answer 2

You can just use a loop to iterate over the different classes, adding their event handlers, and passing a parameter with the current, associated index:

// Traverse the 20 tabs
var i;
for(i=1;i<=20;i++) {
  // Add a preceding zero character for IDs under 10
  var precedingZero = (i<10) ? '0' : '';
  var currentTabClass = ".tab_" + precedingZero + i;
  // Add an event handler for each tab, passing the current counter value, i, as a param in the event
  $(currentTabClass).on('click',{currentIndex:i+''},function(e) {
    // Retrieve the current index
    var theIndex = e.data.currentIndex;
    $('#interactive_folder span').removeClass().addClass('folder_' + theIndex);
    $(hideus).hide();
    $('img.folder_info_' + theIndex + ' , .cte_' + theIndex).show();
    e.preventDefault();
  });  
}

See it working in this codepen.

Answer 3

Here's a tip: use the data-* attribute along with a common class.

HTML Example:

<div class="my-tab" data-id="01">...</div>
<div class="my-tab" data-id="02">...</div>
<div class="my-tab" data-id="03">...</div>

JavaScript Example:

$('.my-tab').on('click',function(e) {
    e.preventDefault();

    var $this = $(this),
        suffix = $this.data("id");

    $('#interactive_folder span').removeClass().addClass('folder_' + suffix );
    $(hideus).hide(); // note: hideus is note defined in scope here
    $('img.folder_info_' + suffix + ' , .cte_' + suffix).show();
});

Note: Logic aside, and without seeing your markup, it would be hard to recommend going down this path. There's a bit of tedious manipulation which you may be able to do with a simple targeting of a parent container.