Javascript: массивы, циклы и функции - PullRequest
0 голосов
/ 16 мая 2018

У меня есть этот рабочий код, но я не уверен, как создать правильный цикл.

Ищем способ создать функцию, в которой указатель мыши накапливает #id в элементе списка и при этом заменяет источник URL-адреса #mainImage на источник в массиве imgUrl.

использование forEach кажется хорошим вариантом, и у меня возникают проблемы с его настройкой.

var imgUrl = [];
imgUrl[0] = "url 1";
imgUrl[1] = "url 2";
imgUrl[2] = "url 3";
imgUrl[3] = "url 4";
imgUrl[4] = "url 5";
imgUrl[5] = "url 6";
imgUrl[6] = "url 7";


(document).ready(function() {

  // mouse over ids in list
  $("#id-1").mouseover(function() {
    $("#mainImage").attr("src", imgUrl[0])
  });

  //mouse over 2
  $("#id-2").mouseover(function() {
    $("#mainImage").attr("src", imgUrl[1])
  });

  //mouse over 3
  $("#id-3").mouseover(function() {
    $("#mainImage").attr("src", imgUrl[2])
  });
});
<div class="main">
  <img id="mainImage" src="url">
</div>
<ul class="menu">
  <li><a href="#" id="id-1">one</a></li>
  <li><a href="#" id="id-2">two</a></li>
  <li><a href="#" id="id-3">three</a></li>
  <li><a href="#" id="id-4">four</a></li>
  <li><a href="#" id="id-5">five</a></li>
  <li><a href="#" id="id-6">six</a></li>
  <li><a href="#" id="id-7">seven</a></li>
</ul>

Ответы [ 2 ]

0 голосов
/ 16 мая 2018

Вместо использования forEach было бы более элегантно использовать только один слушатель (на ul) и проверять индекс event.target (элемент hovered) в списке и получить доступ к тому же индексу в массиве imgUrl. Нет необходимости в jQuery для простой манипуляции с DOM:

const imgUrl = [];
imgUrl[0] = "https://www.gravatar.com/avatar/56a79d2067e203926e68dae37adbea58?s=32&d=identicon&r=PG&f=1"
imgUrl[1] = "https://www.gravatar.com/avatar/34932d3e923ffad9a4a1423e30b1d9fc?s=32&d=identicon&r=PG&f=1";
imgUrl[2] = "url 3";
imgUrl[3] = "url 4";
imgUrl[4] = "url 5";
imgUrl[5] = "url 6";
imgUrl[6] = "url 7";

const menu = document.querySelector('.menu');
const mainImage = document.querySelector('#mainImage');
menu.addEventListener('mouseover', (e) => {
  if (e.target.tagName !== 'A') return;
  const index = [...menu.children].indexOf(e.target.parentElement);
  mainImage.src = imgUrl[index];
});
  <img id="mainImage" src="url">
</div>
<ul class="menu">
  <li><a href="#" id="id-1">one</a></li>
  <li><a href="#" id="id-2">two</a></li>
  <li><a href="#" id="id-3">three</a></li>
  <li><a href="#" id="id-4">four</a></li>
  <li><a href="#" id="id-5">five</a></li>
  <li><a href="#" id="id-6">six</a></li>
  <li><a href="#" id="id-7">seven</a></li>
</ul>
0 голосов
/ 16 мая 2018

Вы можете добавить слушателей в цикле

 var urls = ['url1', url2', 'url3', 'url4','url5', 'url6']
 Array.from(Array(6)).forEach((_, index) => {
  $("#id-"+ (index + 1)).mouseover(() => $("#mainImage").attr("src", urls[index]));
 });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...