Javascript:数组、For循环和函数

Posted

技术标签:

【中文标题】Javascript:数组、For循环和函数【英文标题】:Javascript: Arrays, For-Loops and Functions 【发布时间】:2018-10-25 23:00:51 【问题描述】:

我有这个工作代码,但不确定如何创建正确的循环。

寻找一种方法来创建一个函数,其中一个鼠标悬停在列表元素中的 #id 上,这样做会将 #mainImage 的 url 源更改为 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>

【问题讨论】:

【参考方案1】:

与其使用forEach,不如只使用一个监听器(在ul上)并检查event.target(悬停的元素)在列表,并访问imgUrl 数组中的相同索引。普通 DOM 操作不需要 jQuery:

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>

【讨论】:

很棒的代码! if 语句中的“A”是什么意思? tagName - 检查悬停的元素是否为&lt;a&gt; menu.addEventListener('mouseover', (e) =&gt; e是参数吗? e 是事件。见addEventListener jQuery 处理程序获取的参数相同【参考方案2】:

你可以循环添加监听器

 var urls = ['url1', url2', 'url3', 'url4','url5', 'url6']
 Array.from(Array(6)).forEach((_, index) => 
  $("#id-"+ (index + 1)).mouseover(() => $("#mainImage").attr("src", urls[index]));
 );

【讨论】:

谢谢!!我是 javascript 新手。将详细了解听众

以上是关于Javascript:数组、For循环和函数的主要内容,如果未能解决你的问题,请参考以下文章

带有嵌套for循环的Javascript多维数组-无法正常工作

Javascript学习之Map和Filter函数实现方法详解

我应该为 JavaScript 数组和对象使用哪个 for 循环? [复制]

javascript中for循环的计数器

JavaScript循环遍历

JavaScript:嵌套For循环不起作用