根據數據值創建具有html數據屬性和jquery的標簽系統

Question

我正在提高自己的jquery技能。

這是我的問題：

我正在使用jquery創建一個選項卡系統，並在HTML中將data屬性添加到我的訂單列表和所選的選項卡中：

 let tabHeader = $('.x-nav-tabs-item'); let tabContent = $('.x-tab-pane'); let attributevalue = tabContent.attr('data-cs-tab-index'); tabHeader.click(function() { tabHeader.removeClass('active'); $(this).addClass('active'); let match1 = $('.active a').attr('data-cs-tab-toggle'); tabContent.removeClass('active'); console.log(match1); tabContent.attr('data-cs-tab-index').val(match1).addClass(active); }); 

 <ul class="x-nav" data-x-element="tab_nav" data-x-params="orientation-horizontal"> <li class="x-nav-tabs-item"> <a data-cs-tab-toggle="1">For High school graduates (under 19 yrs):</a> </li> <li class="x-nav-tabs-item active"> <a data-cs-tab-toggle="2">For Mature Students (19 years+):</a> </li> <li class="x-nav-tabs-item"> <a data-cs-tab-toggle="3">For LPNs applying for the RDPN Access program:</a> </li> </ul> <div class="x-tab-content"> <div class="x-tab-pane" data-cs-tab-index="1"> <ul> <li>Graduation from Grade 12 with a C+ average</li> <li>Grade 12 English (minimum grade B)*</li> <li>Grade 12 Biology (minimum grade C)</li> <li>Grade 11 Math (Foundations, Principles or Precalculus – minimum grade C)</li> <li>Grade 10 Science (minimum grade C)</li> </ul> </div> <div class="x-tab-pane" data-cs-tab-index="2"> <ul> <li>Grade 12 English (minimum grade B)*</li> <li>Grade 12 Biology (minimum grade C)</li> <li>Grade 11 Math (Foundations, Principles or Precaculus – minimum grade C)</li> </ul> </div> <div class="x-tab-pane" data-cs-tab-index="3"> <ul> <li>Copy of Licensing as Practical Nurse</li> <li>Proof of the equivalent of 2 years (3600 hours) full-time Work Experience as an LPN</li> </ul> </div> </div> 

那可能是解決問題的一個主意。 當然這是行不通的，我正在考慮使用data（）函數以不同的方法來檢索值，例如：

tabContent.each(function() {
  let value = $(this).data('cs-tab-index');
  console.log(value);
  if (value == match1) {
    $(this).addClass("active");
  }
});

或類似的腳本：

tabContent.removeClass('active');
tabContent.data('cs-tab-index').val(1).addClass('active');

他們兩個都不起作用。

有什么建議或可以指出我的錯誤所在的人嗎？

Answer 1

您所要做的就是：

$('.x-nav a').on('click', function() {
    $('.x-tab-pane')
        .hide()
        .filter('[data-cs-tab-index=' + $(this).attr('data-cs-tab-toggle') + ']')
        .show();
});

這是一個演示

Answer 2

你不遠。 這行：

 tabContent.attr('data-cs-tab-index').val(match1).addClass(active);

有點困惑，應該是：

 tabContent.filter('[data-cs-tab-index=' + match1 + ']').addClass("active");  

在tabContent內找到具有data-cs-tab-index匹配match1的節點。 還有其他方法可以做到這一點，例如使用地圖。

在不對現有代碼進行太多更改的情況下，這是一個更新的版本：

 let tabHeader = $('.x-nav-tabs-item'); let tabContent = $('.x-tab-pane'); tabHeader.click(function() { tabHeader.removeClass('active'); $(this).addClass('active'); //let match1 = $('.active a').data('cs-tab-toggle'); let match1 = $(this).find("a").data('cs-tab-toggle'); tabContent.removeClass('active'); tabContent.filter('[data-cs-tab-index=' + match1 + ']').addClass("active"); }); 

 .x-tab-pane { display:none; } .x-tab-pane.active { display:block; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="x-nav" data-x-element="tab_nav" data-x-params="orientation-horizontal"> <li class="x-nav-tabs-item"> <a data-cs-tab-toggle="1">For High school graduates (under 19 yrs):</a> </li> <li class="x-nav-tabs-item active"> <a data-cs-tab-toggle="2">For Mature Students (19 years+):</a> </li> <li class="x-nav-tabs-item"> <a data-cs-tab-toggle="3">For LPNs applying for the RDPN Access program:</a> </li> </ul> <div class="x-tab-content"> <div class="x-tab-pane" data-cs-tab-index="1"> <ul> <li>Graduation from Grade 12 with a C+ average</li> <li>Grade 12 English (minimum grade B)*</li> <li>Grade 12 Biology (minimum grade C)</li> <li>Grade 11 Math (Foundations, Principles or Precalculus – minimum grade C)</li> <li>Grade 10 Science (minimum grade C)</li> </ul> </div> <div class="x-tab-pane" data-cs-tab-index="2"> <ul> <li>Grade 12 English (minimum grade B)*</li> <li>Grade 12 Biology (minimum grade C)</li> <li>Grade 11 Math (Foundations, Principles or Precaculus – minimum grade C)</li> </ul> </div> <div class="x-tab-pane" data-cs-tab-index="3"> <ul> <li>Copy of Licensing as Practical Nurse</li> <li>Proof of the equivalent of 2 years (3600 hours) full-time Work Experience as an LPN</li> </ul> </div> </div> 

Answer 3

使用模板文字 ：

 let tabHeader = $('.x-nav-tabs-item'); let tabContent = $('.x-tab-pane'); let attributevalue = tabContent.attr('data-cs-tab-index'); tabHeader.click(function() { tabHeader.removeClass('active'); tabContent.removeClass('active'); $(this).addClass('active'); let match1 = $('.active a').attr('data-cs-tab-toggle'); $(`.x-tab-pane[data-cs-tab-index="${match1}"]`).toggleClass('active'); }); 

 .active { background-color: red; display: block; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="x-nav" data-x-element="tab_nav" data-x-params="orientation-horizontal"> <li class="x-nav-tabs-item"> <a data-cs-tab-toggle="1">For High school graduates (under 19 yrs):</a> </li> <li class="x-nav-tabs-item active"> <a data-cs-tab-toggle="2">For Mature Students (19 years+):</a> </li> <li class="x-nav-tabs-item"> <a data-cs-tab-toggle="3">For LPNs applying for the RDPN Access program:</a> </li> </ul> <div class="x-tab-content"> <div class="x-tab-pane" data-cs-tab-index="1"> <ul> <li>Graduation from Grade 12 with a C+ average</li> <li>Grade 12 English (minimum grade B)*</li> <li>Grade 12 Biology (minimum grade C)</li> <li>Grade 11 Math (Foundations, Principles or Precalculus – minimum grade C)</li> <li>Grade 10 Science (minimum grade C)</li> </ul> </div> <div class="x-tab-pane" data-cs-tab-index="2"> <ul> <li>Grade 12 English (minimum grade B)*</li> <li>Grade 12 Biology (minimum grade C)</li> <li>Grade 11 Math (Foundations, Principles or Precaculus – minimum grade C)</li> </ul> </div> <div class="x-tab-pane" data-cs-tab-index="3"> <ul> <li>Copy of Licensing as Practical Nurse</li> <li>Proof of the equivalent of 2 years (3600 hours) full-time Work Experience as an LPN</li> </ul> </div> </div>