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

Question

我有 20 classes classname_01 到 classname_20 由于 class 名称中的 _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();
});

有人可以建议一种方法来增加 class 名称上的数字。

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

新密码是

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

这里有一个提示：使用 data-* 属性和一个常见的 class。

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>

JavaScript 示例：

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

注意：撇开逻辑不谈，如果没有看到您的标记，很难推荐沿着这条路走下去。有一些繁琐的操作，您可以通过简单地定位父容器来完成。

Answer 2

您可以只使用循环遍历不同的类，添加它们的事件处理程序，并传递具有当前关联索引的参数：

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

看到它工作 in this codepen。

Answer 3

如果您不想更改源代码，您可以使用：

$('[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>

注意：我猜这些只是针对您定位的元素的 class。如果你有超过 class，那么脚本会有点复杂。

注意 2：我 100% 确定这不是正确的编码方式。如果你 post 你的 html 代码，你会得到更好的答案。

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

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

jquery

loops

class

increment