根据数据的值创建一个带有html数据属性和jquery的标签系统答案

【问题标题】：Create a tab system with html data attribute and jquery based on the value of the data根据数据的值创建一个带有html数据属性和jquery的标签系统
【发布时间】：2018-12-03 14:06:24
【问题描述】：

我正在提高我的 jquery 技能。

这是我的问题：

我正在使用 jquery 创建一个选项卡系统，并在我的 HTML 中将数据属性添加到我的订单列表和我选择的选项卡中：

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');

它们都不起作用。

有什么建议或谁能指出我的错误在哪里？

【问题讨论】：

有什么问题？
它不起作用。我需要它，当我单击值为 1 的第一个选项卡时，它必须将活动类添加到匹配数据属性到第二个列表中
基于<div class="x-tab-pane" data-cs-tab-index="1">的点击是否应该触发？
是的，它们是连接的
"我正在提高我的 jquery 技能。" - 缩进你的 js 代码 - 生活会轻松很多。

标签： jquery html attr custom-data-attribute

【解决方案1】：

你所要做的就是：

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

here 是一个演示

【讨论】：

【解决方案2】：

使用template literals:

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>

【讨论】：

【解决方案3】：

离你不远了。这一行：

 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>

【讨论】：