javascript - 效果已实现，代码太繁琐，请问如何简化 js
本文介绍了javascript - 效果已实现，代码太繁琐，请问如何简化 js的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
// 定义一个数组储存4个值以用于4个box的轮播图计数
var arr = [
Num1 = 0,
Num2 = 0,
Num3 = 0,
Num4 = 0,
];
// 循环遍历4个box添加事件
for (var i = 1 ; i < 5 ; i ++) {
(function (i) {
$('.box' + i).mouseover(function () {
$('.box' + i + ' .prev').css('display', 'block');
$('.box' + i + ' .next').css('display', 'block');
}).mouseout(function () {
$('.box' + i + ' .next').css('display', 'none');
$('.box' + i + ' .prev').css('display', 'none');
})
$('.box' + i + ' .boxList p').click(function () {
$('.box' + i + ' ul li').eq($(this).index()).removeClass('hide').siblings().addClass('hide');
$('.box' + i + ' .boxList p').eq($(this).index()).addClass('boxlistActive').siblings().removeClass('boxlistActive');
arr[i] = $(this).index();
});
$('.box' + i + ' .next').click(function () {
if (arr[i - 1] < 3) {
$('.box' + i + ' ul li').eq(++ arr[i - 1]).removeClass('hide').siblings().addClass('hide');
$('.box' + i + ' .boxList p').eq(arr[i - 1]).addClass('boxlistActive').siblings().removeClass('boxlistActive');
}
console.log(arr[0]);
});
$('.box' + i + ' .prev').click(function () {
if (arr[i - 1] > 0) {
$('.box' + i + ' ul li').eq(-- arr[i - 1]).removeClass('hide').siblings().addClass('hide')
$('.box' + i + ' .boxList p').eq(arr[i - 1]).addClass('boxlistActive').siblings().removeClass('boxlistActive');
}
});
})(i);
}对应的html
<!--内容开始-->
<div class="content">
<h1>内容</h1>
<div class="wrapper">
<div class="box box1">
<div class="contentTitle">图书</div>
<ul>
<li>
<h2>哈利·波特与魔法石</h2>
<div class="boxText">
<p>哈利波特来了！</p>
</div>
<img src="img/8e3584b6-3169-41c6-9356-939ec79aac2b.jpg" alt="">
</li>
<li class="hide">
<h2>特价专区</h2>
<div class="boxText">
<p>精选畅销好书，特价促销，天天更新，天天特价！</p>
<p class="boxLight">限时优惠</p>
</div>
<img src="img/T1dlVgBbbT1RXrhCrK.jpg" alt="">
</li>
<li class="hide">
<h2>杂志专区</h2>
<div class="boxText">
<p>纸媒杂志＋互联网杂志，你想看的这都有！</p>
<p class="boxLight">同步新刊上线</p>
</div>
<img src="img/T1R3WgBjKT1RXrhCrK.jpg" alt="">
</li>
<li class="hide">
<h2></h2>
<div class="boxText">
<p class="boxLightSM">海量好书，享受精品阅读时光漂亮的中文排版，千万读者选择！</p>
<div class="boxBtn">前往多看阅读</div>
</div>
<img src="img/more-duokan.jpg" alt="">
</li>
</ul>
<div class="boxList">
<p class="boxlistActive"></p>
<p></p>
<p></p>
<p></p>
</div>
<p class="prev"><</p>
<p class="next">></p>
</div>
<div class="box box2">
<div class="contentTitle">MIUI主题</div>
<ul>
<li>
<h2>剑侠世界</h2>
<div class="boxText">
<p>游戏同名主题，免费下载！吴亦凡陪你仗剑江湖！</p>
<p class="boxLight">免费</p>
</div>
<img src="img/f824eaec-20c3-4163-aa82-b0b3b324714b.jpg" alt="">
</li>
<li class="hide">
<h2>纸间梦境</h2>
<div class="boxText">
<p>崭新的九月，要有全新的梦，小米主题带你探寻纸间梦境。</p>
<p class="boxLight">免费</p>
</div>
<img src="img/94178cd7-83e6-4ff3-8091-33263c27992e.jpg" alt="">
</li>
<li class="hide">
<h2>剑侠情缘网络版叁</h2>
<div class="boxText">
<p>首款官方主题，经典再现，十二门派锁屏通通收入囊中</p>
<p class="boxLight">免费</p>
</div>
<img src="./img/2bfd8182-39e4-4fa5-a07c-34ced5dd2521.jpg" alt="">
</li>
<li class="hide">
<h2></h2>
<div class="boxText">
<p class="boxLightSM">众多个性主题、百变锁屏与自由桌面 让你的手机与众不同！</p>
<div class="boxBtn">前往MIUI主题市场</div>
</div>
<img src="./img/more-miui.jpg" alt="">
</li>
</ul>
<div class="boxList">
<p class="boxlistActive"></p>
<p></p>
<p></p>
<p></p>
</div>
<p class="prev"><</p>
<p class="next">></p>
</div>
<div class="box box3">
<div class="contentTitle">游戏</div>
<ul>
<li>
<h2>剑侠世界</h2>
<div class="boxText">
<p>一生不容错过的浪漫武侠！！</p>
<p class="boxLight">免费</p>
</div>
<img src="./img/695c909b-f541-4575-bace-d08b6465025b.jpg" alt="">
</li>
<li class="hide">
<h2>米柚手游模拟器</h2>
<div class="boxText">
<p>在电脑上玩遍小米所有手游</p>
<p class="boxLight">免费</p>
</div>
<img src="./img/T1czW_BXCv1R4cSCrK.png" alt="">
</li>
<li class="hide">
<h2>老九门</h2>
<div class="boxText">
<p>九门恩怨，盗墓笔记前传上线</p>
<p class="boxLight">免费</p>
</div>
<img src="./img/6032cb36-587f-4366-89ef-aefed2546552.jpg" alt="">
</li>
<li class="hide">
<h2></h2>
<div class="boxText">
<p class="boxLightSM">免费下载海量的手机游戏 天天都有现金福利赠送</p>
<div class="boxBtn">前往小米游戏商店</div>
</div>
<img src="./img/more-game.jpg" alt="">
</li>
</ul>
<div class="boxList">
<p class="boxlistActive"></p>
<p></p>
<p></p>
<p></p>
</div>
<p class="prev"><</p>
<p class="next">></p>
</div>
<div class="box box4">
<div class="contentTitle">应用</div>
<ul>
<li>
<h2>2015年度应用</h2>
<div class="boxText">
<p>2015年度应用</p>
<p class="boxLight">免费</p>
</div>
<img src="./img/T1YyJgBCYv1R4cSCrK.png" alt="">
</li>
<li class="hide">
<h2>2015年度游戏</h2>
<div class="boxText">
<p>2015年度游戏</p>
<p class="boxLight">免费</p>
</div>
<img src="./img/T1eaxgB4Ev1R4cSCrK.png" alt="">
</li>
<li class="hide">
<h2>小米应用</h2>
<div class="boxText">
<p>小米出品 必属精品</p>
<p class="boxLight">免费</p>
</div>
<img src="./img/T15VZvB5Kv1R4cSCrK.png" alt="">
</li>
<li class="hide">
<h2></h2>
<div class="boxText">
<p class="boxLightSM">帮助小米手机和其他安卓手机用户 发现好用的安卓应用</p>
<div class="boxBtn">前往小米应用商店</div>
</div>
<img src="./img/more-miui.jpg" alt="">
</li>
</ul>
<div class="boxList">
<p class="boxlistActive"></p>
<p></p>
<p></p>
<p></p>
</div>
<p class="prev"><</p>
<p class="next">></p>
</div>
</div>
</div>对应的css
.hide {
display: none;
}
.content {
width: 1226px;
margin: 0 auto;
}
.content .wrapper {
width: 1226px;
display: flex;
justify-content: space-between;
}
.content h1 {
font-size: 22px;
margin: 30px 0 20px 0;
}
.content .box {
background: #ffffff;
width: 300px;
height: 400px;
position: relative;
}
.content .box img {
width: 200px;
height: 142px;
}
.content .box .contentTitle {
width: 100%;
height: 100px;
line-height: 100px;
text-align: center;
color: orange;
border-top: 1px solid orange;
}
.content .box2 .contentTitle {
color: limegreen;
border-top-color: limegreen;
}
.content .box3 .contentTitle {
color: #e53935;
border-top-color: #e53935;
}
.content .box4 .contentTitle {
color: #2196f3;
border-top-color: #2196f3;
}
.content .box ul {
width: 100%;
height: 250px;
text-align: center;
}
.content .box li h2 {
margin-bottom: 5px;
cursor: pointer;
}
.content .boxText {
width: 180px;
font-size: 10px;
color: gray;
height: 70px;
margin: 0 auto;
}
.content .box .boxLight {
color: orange;
margin-top: 10px;
font-size: 15px;
}
.content .box2 .boxLight {
color: limegreen;
}
.content .box3 .boxLight {
color: #e53935;
}
.content .box4 .boxLight {
color: #2196f3;
}
.content .box .boxLightSM {
color: orange;
margin-top: 10px;
font-size: 10px;
}
.content .box2 .boxLightSM {
color: limegreen;
}
.content .box .boxBtn {
width: 118px;
height: 28px;
line-height: 28px;
margin: 8px auto;
background: #ffffff;
border: 1px solid orange;
color: orange;
}
.content .box2 .boxBtn {
border-color: limegreen;
color: limegreen;
}
.content .box3 .boxBtn {
border-color: #e53935;
color: #e53935;
}
.content .box4 .boxBtn {
border-color: #2196f3;
color: #2196f3;
}
.content .box .boxBtn:hover {
background: orange;
color: #ffffff;
}
.content .box2 .boxBtn:hover {
background: limegreen;
}
.content .box3 .boxBtn:hover {
background: #e53935;
}
.content .box4 .boxBtn:hover {
background: #2196f3;
}
.content .boxList {
width: 100%;
height: 50px;
text-align: center;
position: absolute;
bottom: 0;
}
.content .boxList p {
display: inline-block;
background: gray;
width: 7px;
height: 7px;
margin: 0 10px;
border-radius: 50%;
border: 2px solid;
border-color: white;
}
.content .boxList p:hover {
background: orange;
}
.content .box .prev , .content .box .next{
position: absolute;
width: 25px;
height: 60px;
background: rgb(176,176,176);
top: 45%;
line-height: 60px;
text-align: center;
font-size: 20px;
color: #ffffff;
user-select: none;
display: none;
cursor: pointer;
}
.content .box .next {
right: 0;
}
.box .next:hover , .box .prev:hover {
background: rgb(117,117,117);
}
.boxlistActive {
background: #ffffff !important;
border-color: orange !important;
}只看js就好，如果方便的话希望可以确认实现效果后给一下参考代码。
解决方案
var arr = [
Num1 = 0,
Num2 = 0,
Num3 = 0,
Num4 = 0,
];
// 循环遍历4个box添加事件
for (var i = 1 ; i < 5 ; i ++) {
(function (i) {
test(i);
})(i);
}
function test (i) {
let prev = $('.box' + i + ' .prev');
let next = $('.box' + i + ' .next');
let list = $('.box' + i + ' ul li');
let boxList = $('.box' + i + ' .boxList p');
$('.box' + i).mouseover(function () {
prev.css('display', 'block');
next.css('display', 'block');
}).mouseout(function () {
next.css('display', 'none');
prev.css('display', 'none');
})
boxList.click(function () {
list.eq($(this).index()).removeClass('hide').siblings().addClass('hide');
boxList.eq($(this).index()).addClass('boxlistActive').siblings().removeClass('boxlistActive');
arr[i] = $(this).index();
});
next.click(function () {
if (arr[i - 1] < 3) {
list.eq(++ arr[i - 1]).removeClass('hide').siblings().addClass('hide');
boxList.eq(arr[i - 1]).addClass('boxlistActive').siblings().removeClass('boxlistActive');
}
console.log(arr[0]);
});
prev.click(function () {
if (arr[i - 1] > 0) {
list.eq(-- arr[i - 1]).removeClass('hide').siblings().addClass('hide')
boxList.eq(arr[i - 1]).addClass('boxlistActive').siblings().removeClass('boxlistActive');
}
});
}我只是做了把函数拿出来,变量提取的动作,虽然有很多DOM操作比较相似看起来可以抽成一个函数,但是频繁的操作DOM,耦合太深,就有可能导致后期维护不好区分,因为功能是耦合在一起的,难免维护的时候会忘记功能.
另,代码我没自测哈,你看着意思就行了
这篇关于javascript - 效果已实现，代码太繁琐，请问如何简化 js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
