Генерация случайных атрибутов данных для содержимого с вкладками

Question

Я пытаюсь создать случайные числа, чтобы их можно было назначать каждому экземпляру класса.

Причина, по которой я это делаю, заключается в том, что у меня есть содержимое с вкладками, и когда у меня есть два экземпляра модулей с вкладками, он сбрасывает атрибуты данных. Например:

• Моя страница содержит три вкладки. Эти вкладки в настоящее время имеют атрибут data-item 1,2 и 3.
• Затем я добавляю еще один модуль вкладок из трех вкладок. Когда я добавляю этот модуль на страницу, data-item сбрасывается на 1.
• Короче говоря, на странице существует две вкладки с атрибутом data-item 1, 2 и 3.
• Поэтому, когда я нажимаю на одну вкладку, изменяется и другая вкладка (которая имеет дубликат data-item).

Когда пользователь щелкает вкладку, он отображает изображение, назначенное этому разделу (они связаны через data-item).

Поэтому я пытаюсь сгенерировать уникальные data-items и назначить их для .tab и .image. Это объединит их в пару.

Однако при моем текущем подходе он назначает их всем вкладкам.

Текущий подход :

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

Answer 1

Примечание случайные числа не гарантируются как уникальные.

Весьма вероятно, что с помощью этого метода вы получите повторяющиеся числа.
Вы можете добавить массив для хранения "used "номера и проверьте, чтобы уменьшить дубликаты.

Но чтобы ответить на ваш вопрос:

---

Ваш код генерирует одно случайное число в верхней части, а затем назначает это единственное число тоже все (в повернуть) (как вы нашли).

Вам нужно каждый раз регенерировать число, но чтобы получить их попарно, вам нужен один l oop.

Я также преобразовал в .data() вместо .attr("data-

Обновленный фрагмент:

$(function() {

  var images = $('.imageWrapper .image');
  var tabs = $('.tabsWrapper .tab');

  if (images.length !== tabs.length)
    alert("tabs and images don't match");
  else {
    for (var i = 0; i < images.length; ++i) {
      // generate a different random id for each pair
      var randomNumber = Math.floor(1000 + Math.random() * 9000);
      images.eq(i).data("item", randomNumber);
      tabs.eq(i).data("item", randomNumber);
    }
  }

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

      $('.image').removeClass('active');
      $(".image").filter(function() { 
            return $(this).data('item') == tabID
        }).addClass('active');
      $(".tab").removeClass("active");
      $(this).addClass("active");
    });

});

.active { color: red; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tabbedContent">

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

  <div class="tabsWrapper">
    <div class="tab">
      tab 1
      <!-- tab text here -->
    </div>
    <div class="tab">
      tab 2
      <!-- tab text here -->
    </div>
  </div>

</div>