使用jQuery更改类为class_01、class_02的相同函数

我有20门课，从classname\u 01到classname\u 20 由于类名中的_00，我宁愿不必写20次相同的代码。我的代码示例是：

$('.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();
});

有人能给我一个增加类名的方法吗

编辑添加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>

---

这里有一个提示：将

data-*

属性与公共类一起使用

HTML示例：

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

---

注意：撇开逻辑不谈，如果看不到您的标记，就很难推荐您走这条路。有一点繁琐的操作，您可以通过简单的父容器目标来完成。

您可以使用一个循环来迭代不同的类，添加它们的事件处理程序，并通过当前的关联索引传递一个参数：

// 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();
  });  
}

//遍历20个选项卡
var i；
对于（i=1；i如果您不想更改源代码，可以使用：


$（'[class^=tab_u3;]'）。在（'click'，函数（e）{
e、 预防默认值（）；
$（'img[class^=folder\u info][class^=cte\u]）.hide（）；
var thisNumber=$（this.attr（'class'）.replace（'tab_u3;'，''）；
$（'#交互式文件夹span'）.removeClass（）.addClass（'folder#'+thisNumber）；
$（'img.folder_info_'+thisNumber+，.cte_'+thisNumber.show（）；
})；
。文件夹\u 01{
颜色：红色；
}
.folder_02{
颜色：蓝色；
}


选项卡01（单击我）
选项卡02（单击我）

跨度
CTE 01
CTE 02
我可以看到一些您必须使用的HTML吗？如果所有选项卡都属于同一父元素，并且除了其他选项卡之外没有其他同级选项卡，那么您可以使用jQuery选择器（parent>ele）要选择元素的类型，请抓取部分类名以查找编号，并用该编号完成其余部分。编辑：SemanticsAH好吧，aria角色现在是一个沉默点，因为我刚刚发现aria 1.1无论如何都将删除拖放角色。感谢这项工作，但我使用了技术恐惧症的解决方案。$（hideus.hide（）//注意：hideus是在这里的范围内定义的注释变量hideus=$（'.folder_info_01、.folder_info_02、.folder_info_03、.folder_info_04、.folder_info_05、.folder_info_06、.folder_info_06、.sub_title__03、.sub_title___04、.sub_title_title___06、.cte(cte(；
$('.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();
});

// 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();
  });  
}