关于.eq($(this).index())

首页课程实战体系课手记专栏慕课教程

来源：3-4 行为层

慕运维5475419

2020-03-20 14:26:07

之前的课中介绍过一个原生js案例

实现的功能是点击圆点，按索引切换图片，案例中要通过setattribute给每个圆点设立索引值，然后再获取索引值，

而在本节课直接通过.eq($(this).index())实现了点击文字然后按索引切换图片的功能，没有先通过setattribute给每个圆点设立索引值原因是什么？

之前另一个老师的案例如下图

该案例源码如下

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

* {

padding: 0;

margin: 0;

}

body {

font-family: "微软雅黑";

font-size: 18px;

color: #14191e;

}

a {

text-decoration: none;

position: relative;

}

a:visited,

a:link {

color: #5e5e5e;

}

@font-face {

font-family: "iconfont";

src: url("../img/font/iconfont.eot");

src: url("../img/font/iconfont.eot") format("embedded-opentype"),

url("../img/font/iconfont.woff") format("woff"),

url("../img/font/iconfont.ttf") format("truetype"),

url("../img/font/iconfont.svg#iconfont") format("svg");

}

.main {

width: 1200px;

height: 460px;

margin: 30px auto;

position: relative;

overflow: hidden;

}

/* 焦点图 */

.banner {

width: 1200px;

height: 460px;

overflow: hidden;

}

.banner-slide {

width: 1200px;

height: 460px;

float: left;

background-repeat: no-repeat;

/* overflow: hidden; */

display: none;

}

.slide1 {

}

.slide-active {

display: block;

}

.slide2 {

}

.slide3 {

}

.button {

position: absolute;

width: 40px;

height: 80px;

left: 244px;

background: url(../img/arrow.png) center center no-repeat;

top: 50%;

margin-top: -40px;

transform: rotate(180deg);

}

.button:hover {

background-color: #333;

opacity: 0.8;

}

.next {

left: auto;

right: 0;

transform: rotate(0deg);

}

.dots {

position: absolute;

right: 24px;

bottom: 24px;

line-height: 12px;

}

.dots span {

display: inline-block;

width: 12px;

height: 12px;

border-radius: 100%;

background: rgba(7, 17, 27, 0.4);

margin-left: 8px;

/* border: 1px solid white; */

box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.8) inset;

cursor: pointer;

}

.dots span.active {

background: #fff;

box-shadow: 0 0 0 1px rgba(7, 17, 27, 0.4) inset;

}

/* 菜单 */

.menu-box {

position: absolute;

top: 0;

left: 0;

width: 244px;

height: 460px;

background: rgba(7, 17, 27, 0.5);

z-index: 1;

}

/* 主菜单 */

.menu-content {

position: absolute;

top: 0;

left: 0;

width: 244px;

height: 460px;

z-index: 2;

}

.menu-item {

height: 64px;

line-height: 66px;

cursor: pointer;

font-size: 12px;

padding: 0 24px;

}

.menu-item a {

display: block;

color: #fff;

font-size: 16px;

border-bottom: 1px solid rgba(255, 255, 255, 0.2);

padding: 0 8px;

}

.menu-item:last-child a {

border-bottom: none;

}

.menu-item i {

position: absolute;

right: 32px;

top: 2px;

/* font-style: normal; */

color: rgba(255, 255, 255, 0.5);

font-family: "iconfont";

font-size: 24px;

}

.sub-menu {

width: 730px;

height: 458px;

position: absolute;

top: 0;

left: 244px;

background: #fff;

z-index: 500;

border: 1px solid #d9dde1;

box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);

}

.inner-box {

width: 100%;

height: 100%;

background: url(../img/fe.png) no-repeat;

display: none;

}

.sub-innerbox {

width: 652px;

margin-left: 40px;

overflow: hidden;

}

.title {

font-size: 16px;

line-height: 16px;

color: #f01414;

font-weight: bold;

margin: 28px 0 30px 0;

}

.sub-row {

margin-bottom: 25px;

}

.bold {

font-weight: 700;

}

.mr10 {

margin-right: 10px;

}

.ml10 {

margin-left: 10px;

}

.hide {

display: none;

}

</style>

</head>

<body>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<a href="">网络机顶盒</a>

</div>

</div>

</div>

</div>

</div>

<a href="">滚筒式洗衣机</a>

<a href="">迷你洗衣机</a>

<a href="">洗烘一体机</a>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</a>

</div>

</a>

</div>

</a>

</div>

</a>

</div>

</div>

</a>

</div>

</a>

</div>

</a>

</div>

</div>

// 声明全局变量

var index = 0,

timer = null,

main = byid('main'),

prev = byid('prev'),

next = byid('next');

var pics = byid('banner').getElementsByTagName('div'),

dots = byid('dots').getElementsByTagName('span'),

menuContent = byid('menu-content');

var menuItems = document.getElementsByClassName('menu-item'),

subMenu = byid('sub-menu'),

innerBox = subMenu.getElementsByClassName('inner-box'),

banner = byid('banner');

var size = pics.length;

// 封装getelelmentbyid

function byid(id) {

return typeof (id) == 'string' ?

document.getElementById(id) :

id;

}

// 兼容写法

function addHandler(element, type, handler) {

if (element.addEventListener) {

element.addEventListener(type, handler, true)

} else if (element.attachEvent) {

element.attachEvent('on' + type, handler);

} else {

element['on'+type] = handler;

}

// 清除定时器

function stopAutoPlay() {

if (timer) {

clearInterval(timer);

}

// 自动轮播

function startAutoPlay() {

timer = setInterval(function () {

index++;

if (index>=size) {

index=0

}

changeImg();

},3000)

}

// 切换图片

function changeImg() {

// 遍历所有图片，将图片隐藏，将圆点上的类清除

for (let i = 0; i < size; i++) {

pics[i].style.display='none';

dots[i].className='';

}

// 显示当前图片

pics[index].style.display = 'block';

// 当前圆点高亮显示

dots[index].className = 'active';

}

// 点击下一张显示下一张

/* prev.addEventListener('click',function () {

index--;

if (index<0) {

index=size-1;

}

changeImg();

}) */

addHandler(next,'click',function () {

index++;

if (index>=size) {

index=0;

}

changeImg();

})

// 点击上一张，显示上一张图片

addHandler(prev,'click',function () {

index--;

if (index<0) {

index=size-1;

}

changeImg();

})

// 点击圆点，按索引切换图片

for (let d = 0; d < size; d++) {

// 为每个对象设立序号属性及值

dots[d].setAttribute('data-id',d);

// 加入dom2点击事件

addHandler(dots[d],'click',function () {

// index绑定序号值

index = this.getAttribute('data-id');

changeImg();

});

}

// 鼠标划过主菜单

for (let m = 0,idx; m < menuItems.length; m++) {

// 给所有主菜单项定义索引属性及值

menuItems[m].setAttribute('data-index',m);

addHandler(menuItems[m],'mouseover',function () {

// 显示子菜单所在的背景

subMenu.className = 'sub-menu';

// 获取当前主菜单项的索引

idx = this.getAttribute('data-index') ;

// 遍历所有的子菜单innerBox，将他们隐藏

for (let j = 0; j < innerBox.length; j++) {

// 隐藏所有的子菜单

innerBox[j].style.display = 'none';

// 所有的主菜取消背景

menuItems[j].style.background = 'none';

}

// 找到当前子菜单，让其显示出来

innerBox[idx].style.display = 'block';

menuItems[idx].style.background = 'rgba(0,0,0,0.1)';

});

}

// 鼠标离开banner,隐藏子菜单

// addHandler(banner,'mouseout', function () {

// subMenu.className ='sub-menu hide';

// })

// 鼠标离开主菜单menuContent,隐藏子菜单

addHandler(menuContent,'mouseout',function () {

subMenu.className ='sub-menu hide';

})

// 鼠标划入子菜单时，子菜单显示

addHandler(subMenu,'mouseover',function () {

this.className = 'sub-menu';

})

// 鼠标离开子菜单时，子菜单隐藏

addHandler(subMenu,'mouseout',function () {

this.className = 'sub-menu hide';

})

// 鼠标划入main，停止轮播

addHandler(main,'mouseover',stopAutoPlay);

// 鼠标离开main，继续轮播

addHandler(main,'mouseout',startAutoPlay);

// 自动开启轮播

startAutoPlay();

</script>

</body>

</html>

写回答

1回答

好帮手慕星星

2020-03-20

已采纳

同学你好，问题解答如下：

1、原生js中使用了for循环。在循环中给元素绑定点击事件，事件中使用了循环中的变量。循环会先执行完毕，当之前点击事件的时候，变量是for循环结束后的值，而不是每一次循环对应的值，所以使用setAttribute方法设置了属性，属性值为循环对应的变量，使用的时候再获取。

2、jQuery中不需要手动添加循环，click()方法内部已经封装了循环，直接使用即可。所以点击那个元素，就可以使用index()方法获取到对应的索引。

在逻辑上比原生js简单理解一些，自己可以再测试理解下。

祝学习愉快！

0 学习 · 14456 问题

查看课程

相似问题

老師檢查一下是不是因为使用了this就可以不用定义eq($(this).index())呢

回答 2

老师这一段我反复看了几遍还是有些糊涂不明白 eq方法是哪来的？是原生js里面的内容吗？

回答 1

回答 2

请问关于eq

回答 1

回答 2

打开慕课网App查看更多内容