IntroJs — Как выделять первый элемент?

Question

[Виталий Рыбченко]

Всем доброго дня.
Использую вариант интерактивной инструкции IntroJs (https://github.com/usablica/intro.js)
У меня на странице динамические таблицы, в них есть кнопки - хочу выделять их и сообщать пользователю через инструкцию что это за кнопки.
Но есть проблема - по сколько строки таблицы генерируются динамически, они имеют один и тот же data-step и data-intro. В результате Intro выделяет кнопку в последней строке, что не очень презентабельно.
Вопрос в том, как сделать так, чтобы Intro выделял кнопку в первой строке?
Пример того, как выглядит сейчас:

Answer 1

[Алексей Зуев]

Вариант 1 - Пример

Вариант 2 - Можно изменить исходник 131 строка

//first add intro items with data-step
for (var i = 0, elmsLength = allIntroSteps.length; i < elmsLength; i++) {
  var currentElement = allIntroSteps[i];
  var step = parseInt(currentElement.getAttribute('data-step'), 10);

  if (step > 0 && !introItems[step - 1]) { // изменить

Comments

[Виталий Рыбченко]

Хотя лезет ошибка:
Uncaught TypeError: Cannot read property '1' of undefined

[Алексей Зуев]

biovr: у меня переход к кнопкам - второй шаг, поэтому

intro._introItems[1].element = document.querySelector('[data-step="2"]');

1 и 2

[Алексей Зуев]

Алексей Зуев:

intro._introItems[n-1].element = document.querySelector('[data-step="n"]');

n - шаг у кнопок

[Алексей Зуев]

biovr: покажите код

[Виталий Рыбченко]

Алексей Зуев:
var intro = introJs();
intro._introItems[n - 1].element = document.querySelector('[data-step="3"]');
ругается, Uncaught ReferenceError: n is not defined
код на странице такой:

[Виталий Рыбченко]

Не пойму как под показать - заворачивает в картинку

[Алексей Зуев]

biovr:

intro._introItems[2].element = document.querySelector('[data-step="3"]');

Я же написал, что n - шаг

[Виталий Рыбченко]

Алексей Зуев: Uncaught TypeError: Cannot read property '2' of undefined
Похоже что просто не воспринимается само значение
Я вставил его на странице

а сам код интро тянется отдельно, выше.
код элементов, что сформировалось в html сейчас кину картинкой

[Алексей Зуев]

biovr: этот код после старта надо писать

[Виталий Рыбченко]

Алексей Зуев: запуск с кнопки, а в кнопке код javascript:introJs().setOption('tooltipClass', 'customDefault').start();
как добавить к нему Ваш?

[Виталий Рыбченко]

Алексей Зуев: А нет возможности это изменить в самом скрипте IntorJS? Чтобы он всегда по умолчанию выбирал первый элемент не зависимо от номера шага...

[Алексей Зуев]

biovr:

<a href="#" onclick="introJs().setOption('tooltipClass', 'customDefault').start()._introItems[1].element = document.querySelector('[data-step=\'2\']');return false;">Старт</a>

Я думал инлайн js уже мертв...

[Алексей Зуев]

Алексей Зуев: цифры только правильные поставьте

[Виталий Рыбченко]

Алексей Зуев: :( ошибка
Uncaught SyntaxError: missing ) after argument list

[Алексей Зуев]

biovr: обновил ответ, вобщем сделал всё для вашего счастья)

[Виталий Рыбченко]

Алексей Зуев: Огромное спасибо, все работает!

[Алексей Зуев]

biovr: всё плохо(.

[Алексей Зуев]

пример

[Алексей Зуев]

скопируйте у меня скрипт, если сами поменять не в состоянии строку