生成选项卡式内容的随机数据属性

我正在尝试创建随机数,以便可以将它们分配给每个类实例。

我这样做的原因是因为我具有选项卡式内容,并且当我有两个选项卡式模块实例时,它将重置数据属性。例如:

  • My page has content with three tabs. These tabs currently have the data-item attribute of 1,2 and 3.
  • I then add another tab module of three tabs. When I add this module to the page, the data-item resets to 1.
  • In short, two tabs exist on page which has the data-item attribute of 1, 2 and 3.
  • So when I click on one tab, the other tab (which has the duplicated data-item) changes too.

用户单击选项卡时,它将显示分配给该部分的图像(它们通过数据项链接)。

So I'm trying to generate unique data-items and assign them to both a .tab and an .image. This will pair them up.

但是,按照我目前的方法,它会将它们分配给所有选项卡。

当前方法:

$(function() {

	// generate random id for data item
	var randomnNmber = Math.floor(1000 + Math.random() * 9000);

	$('.imageWrapper .image').each(function () {
		$(this).attr('data-item',randomnNmber);
	});

	$('.tabsWrapper .tab').each(function () {
		$(this).attr('data-item',randomnNmber);
	});

	$(".tab").on("click", function(){
		var tabID  = $(this).attr("data-item");
		event.stopPropagation();

		$('.image').removeClass('active');
		$('.image[data-item = '+tabID+']').addClass('active');
		$(".tab").removeClass("active");
		$(this).addClass("active");
	});

});
<div class="tabbedContent">

  <div class="imageWrapper">
     <div class="image">
      <!-- image -->
     </div>
     <div class="image">
      <!-- image -->
     </div>
  </div>

  <div class="tabsWrapper">
    <div class="tab">
      <!-- tab text here -->
    </div>
    <div class="tab">
      <!-- tab text here -->
    </div>
  </div>
  
</div>
评论