Как найти верный индекс элемента массива?

Question

[Thomas Faber]

Есть массив сonst arr =['King', 'Queen', 'Sword', 'King', 'Armor', 'King'];

Текст получаю из ввода инпут и меняю тип на массив, мне нужно реализовать, что когда пользователь наводит курсор на слово King выдать его верный индекс. (слушатель срабатывает только со словом King. т.е курсор над первым King должно выдавать индекс 0. если на последнем то индекс 5)

Comments

[Thomas Faber]

Надеюсь я хоть как то понятно изложил суть вопроса, если у вас сломался мозг сорри

[Ankhena]

Thomas Faber, так и что именно у вас не нагуглилось и не получилось?

[Thomas Faber]

Ankhena, я использую indexof, но он находит первое совпадение в массиве со значением king, а мне нужно получать индекс именно того элемента со значением king на который навелся

[Ankhena]

Thomas Faber, ладно, помогу вам https://yandex.ru/search/?text=javascript+%D0%BF%D...

[alexalexes]

Для реализации такой механики у вас массив должен быть не из строковых элементов, а из объектов. Тогда в обработчиках можно делать ссылки на объект в массиве, чтобы можно было изменять состояние элемента, которое выльется в изменение CSS свойств в интерфейсе (через реактивность, если будете использовать Vue).

[Lynn «Кофеман»]

Наведение курсора подразумевает HTML. Где он в вопросе?

Answer 1

[Big_Trouble]

<div class="container"></div>

const run = () => {
	const words =['King', 'Queen', 'Sword', 'King', 'Armor', 'King'];
  const $container = document.querySelector(".container");

  const getIndexes = (arr, target) => {
    return arr.reduce((acc, word, i) => {
      if(target === word) {
        acc.push({
          name: word,
          index: i
        })
      } else {
        acc.push({name: word});
      }
      return acc
    }, [])
  }
  const insertHTML = (list) => {
    list.forEach((item) => {
    	if(item.index !== undefined) {
      	var template = `<div data-index="${item.index}">${item.name}</div>`;
      } else {
      	var template = `<div data-index="">${item.name}</div>`
      }
      
      $container.insertAdjacentHTML('beforeend', template)
    })
  }
  
  insertHTML(getIndexes(words, "King"))
  
  
	$container.addEventListener('mouseover', (e) => {
  	const index = e.target.getAttribute('data-index');
    if(index) {
    	console.log(index)
    }
  })
}
run()

Comments

[Big_Trouble]

getIndexes - Получаем массив объектов, с помощью метода reduce . На каждой итерации проверям является ли элемент входного массива - нашим таргетом. Если да, то в результирующий массив (acc) пушим объект с полями name, index. Если нет, то только с полем name
insertHTML - пробегаемся по всем элементах входного массива list, если у объекта есть поле index - мы создаем template с дата атрибутом data-index, с метода insertAdjacentHTML в контейнер добавляем новый html код

В конце обязательно на родительский элемент вешаем обработчик событий mouseover проверяем есть ли у event.target атрибут data-index

Надеюсь все понятно

[Thomas Faber]

Big_Trouble, кто ты воин?) Блин спасибо большое, очень помог. Сейчас буду разбирать и запоминать)

[Big_Trouble]

Thomas Faber, Обращайся)

Answer 2

[dollar]

Очевидно, слово "King" не может однозначно соответствовать индексу, т.к. их несколько в массиве. Нужен другой подход (или их комбинация).

Например, по координате в инпуте: getArrIndex(x), где x - координата в каких-то удобных вам единицах. Естественно, эту функцию нужно будет самому написать. Если текст с переносами, то придётся мутить что-то типа getArrIndex(x,y)

Также можно попробовать ещё один подход: getLastWordIndex(text), в котором функция смотрит на последнее слово в тексте и выдаёт его номер. То есть здесь text - это весь текст от начала до позиции курсора включительно и включая слово под курсором, но всё остальное обрезано.

Можно ещё что-нибудь придумать. Выбирайте, что вам кажется более удобным и разумным, - и реализуйте это.