Javascript:数组，For-循环和函数
Javascript:数组，For-循环和函数
提问于 2018-05-16 02:19:55
我有这个工作代码，但不知道如何创建一个正确的循环。
寻找一种创建函数的方法，其中用户可以在列表元素中创建一个#id，并将#mainImage的url源更改为imgUrl数组中的url源。
使用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
Stack Overflow用户
回答已采纳
发布于 2018-05-16 02:27:57
与其使用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>
Stack Overflow用户
发布于 2018-05-16 02:26:42
可以在循环中添加侦听器。
var urls = ['url1', url2', 'url3', 'url4','url5', 'url6']
Array.from(Array(6)).forEach((_, index) => {
$("#id-"+ (index + 1)).mouseover(() => $("#mainImage").attr("src", urls[index]));
});
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50361577
复制相关文章
相似问题
腾讯云开发者
