When we were learning native JS, we wrote a case of picture box switching. Do you still remember what method was used to switch the navigation bar and content bar synchronously? The creation and acquisition of custom attributes is more troublesome. We also need to use the for loop to traverse the binding events, but after learning jQuery, although it is only an entry, it can complete some basic dynamic effects.
Let's compare the implementation parts of the two:
Native JS:
The native JS is to use setAttribute to set a custom attribute index when binding the mouse movement event to each li in a loop, and then use getAttribute to get the custom attribute value index bound to the li when binding the movement event, and then use the exclusive idea : Kill other people, leave myself, and only leave the picture corresponding to the li custom attribute value
<script>
var lis=document.querySelectorAll('li')
var as=document.querySelectorAll('a')
for(var i=0;i<lis.length;i++){
lis[i].setAttribute('index',i) //设置自定义属性
lis[i].addEventListener('mouseover',function() {
var index=this.getAttribute('index') //获取自定义属性
for(var i=0;i<as.length;i++){
as[i].style.display='none';
}
as[index].style.display='block'
})
}
</script>jQuery：
The implementation of jquery will be too simple! ! , because we have implicit iteration, we don't need loop binding, use jQuery's index() method to get the index value of the li to which the cursor moves, and then directly use the exclusive idea to use the eq() method in the filter method to get the cursor Move the image corresponding to the index value, use jQuery's show() method to display it, and then use the hide() method to hide its siblings (siblings)
<script>
$('.map-box li').mouseover(function(){
var index=$(this).index()
$('.img-box a').eq(index).show()
$('.img-box a').eq(index).siblings().hide()
})
</script>Full code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
.out-box{
box-sizing: border-box;
width: 700px;
height: 500px;
margin: 100px auto;
}
.map-box{
float: left;
box-sizing: border-box;
width: 200px;
height: 500px;
background-color: rgb(129, 129, 129);
}
.img-box{
float: left;
box-sizing: border-box;
width: 500px;
height: 500px;
border: 1.5px solid;
border-left: 0;
}
.map-box ul{
width: 200px;
box-sizing: border-box;
}
.map-box ul li{
box-sizing: border-box;
width: 200px;
height: 100px;
background-color: rgb(255, 230, 131);
border: 1.5px solid;
border-bottom: 0;
list-style: none;
text-align: center;
line-height: 100px;
font-size: 27px;
font-weight: 800;
}
.map-box ul li:last-child{
border-bottom:1.5px solid;
}
.map-box ul li:hover{
background-color: rgb(202, 148, 0);
color: aliceblue;
border-color: black;
}
.img-box a{
display: inline-block;
display: none;
}
.img-box img{
width: 498px;
height: 498px;
box-sizing: border-box;
}
</style>
<script src="./jQuery.js"></script>
</head>
<body>
<div class="out-box">
<div class="map-box">
<ul>
<li>文峰塔</li>
<li>羑里城</li>
<li>岳飞庙</li>
<li>殷墟</li>
<li>文字博物馆</li>
</ul>
</div>
<div class="img-box">
<a href="javascript::" class="img1" style="display: block">
<img src="./phpto/wenfeng.jpg" alt="" >
</a>
<a href="javascript::" class="img2">
<img src="./phpto/youli.jpg" alt="">
</a>
<a href="javascript::" class="img3">
<img src="./phpto/yuefei.jpg" alt="">
</a>
<a href="javascript::" class="img4">
<img src="./phpto/yinxu.jpg" alt="">
</a>
<a href="javascript::" class="img5">
<img src="./phpto/wenzi.jpg" alt="">
</a>
</div>
</div>
<script>
$('.map-box li').mouseover(function(){
var index=$(this).index()
$('.img-box a').eq(index).show()
$('.img-box a').eq(index).siblings().hide()
})
</script>
</body>
</html>