老师这个楼层怎么封装
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.floor{
width: 1200px;
margin: 0 auto;
margin-bottom: 50px;
}
a{
text-decoration: none;
}
li{
list-style: none;
}
.floor-part{
width: 100%;
height: 60px;
}
.floor-part div{
display: inline-block
}
.floor-part2{
float: right;
margin-right: 20px;
}
.floor-part span{
font-size: 20px;
height: 60px;
cursor: pointer;
line-height: 60px;
}
.floor-part1 span:nth-child(1){
width: 50px;
height: 50px;
border-radius: 50%;
background: black;
margin-right: 20px;
color: white;
}
.floor-line{
width: 100%;
height: 10px;
background: red;
}
.floor-img{
width: 1200px;
margin: 0 auto;
height: 380px;
}
.floor-hide{
display: none;
}
.floor-img ul{
overflow: hidden;
margin: 0 auto;
margin-bottom: 30px;
margin-top: 30px;
}
.floor-img ul li{
float: left;
width: 16%;
text-align: center
}
.floor-img ul li p:nth-child(3){
color: red;
}
</style>
</head>
<body>
<div class="floor">
<div class="floor-part">
<div class='floor-part1'>
<span>1F</span>
<span>服装鞋包</span>
</div>
<div class='floor-part2'>
<span>热卖</span> |
<span>男装</span> |
<span>女装</span> |
</div>
</div>
<div class="floor-line"></div>
<div class="floor-img">
<ul>
<li>
<img src="素材/floor/1.jpg">
<p>服装</p>
<p>￥65</p>
</li>
<li>
<img src="素材/floor/1.jpg">
<p>服装</p>
<p>￥65</p>
</li>
<li>
<img src="素材/floor/1.jpg">
<p>服装</p>
<p>￥65</p>
</li>
<li>
<img src="素材/floor/1.jpg">
<p>服装</p>
<p>￥65</p>
</li>
<li>
<img src="素材/floor/1.jpg">
<p>服装</p>
<p>￥65</p>
</li>
<li>
<img src="素材/floor/1.jpg">
<p>服装</p>
<p>￥65</p>
</li>
</ul>
<ul>
<li>
<img src="素材/floor/1.jpg">
<p>服装</p>
<p>￥65</p>
</li>
<li>
<img src="素材/floor/1.jpg">
<p>服装</p>
<p>￥65</p>
</li>
<li>
<img src="素材/floor/1.jpg">
<p>服装</p>
<p>￥65</p>
</li>
<li>
<img src="素材/floor/1.jpg">
<p>服装</p>
<p>￥65</p>
</li>
<li>
<img src="素材/floor/1.jpg">
<p>服装</p>
<p>￥65</p>
</li>
<li>
<img src="素材/floor/1.jpg">
<p>服装</p>
<p>￥65</p>
</li>
</ul>
</div>
<div class="floor-img floor-hide">
<ul>
<li>
<img src="素材/floor/2.jpg">
<p>服装</p>
<p>￥65</p>
</li>
<li>
<img src="素材/floor/3.jpg">
<p>服装</p>
<p>￥65</p>
</li>
<li>
<img src="素材/floor/4.jpg">
<p>服装</p>
<p>￥65</p>
</li>
</ul>
</div>
<div class="floor-img floor-hide">
<ul>
<li>
<img src="素材/floor/5.jpg">
<p>服装</p>
<p>￥65</p>
</li>
<li>
<img src="素材/floor/6.jpg">
<p>服装</p>
<p>￥65</p>
</li>
</ul>
</div>
</div>
<div class="floor">
<div class="floor-part">
<div class='floor-part1'>
<span>2F</span>
<span>服装鞋包</span>
</div>
<div class='floor-part2'>
<span>热卖</span> |
<span>男装</span> |
<span>女装</span> |
</div>
</div>
<div class="floor-line"></div>
<div class="floor-img">
<ul>
<li>
<img src="素材/floor/1.jpg">
<p>服装</p>
<p>￥65</p>
</li>
<li>
<img src="素材/floor/1.jpg">
<p>服装</p>
<p>￥65</p>
</li>
<li>
<img src="素材/floor/1.jpg">
<p>服装</p>
<p>￥65</p>
</li>
<li>
<img src="素材/floor/1.jpg">
<p>服装</p>
<p>￥65</p>
</li>
<li>
<img src="素材/floor/1.jpg">
<p>服装</p>
<p>￥65</p>
</li>
<li>
<img src="素材/floor/1.jpg">
<p>服装</p>
<p>￥65</p>
</li>
</ul>
<ul>
<li>
<img src="素材/floor/1.jpg">
<p>服装</p>
<p>￥65</p>
</li>
<li>
<img src="素材/floor/1.jpg">
<p>服装</p>
<p>￥65</p>
</li>
<li>
<img src="素材/floor/1.jpg">
<p>服装</p>
<p>￥65</p>
</li>
<li>
<img src="素材/floor/1.jpg">
<p>服装</p>
<p>￥65</p>
</li>
<li>
<img src="素材/floor/1.jpg">
<p>服装</p>
<p>￥65</p>
</li>
<li>
<img src="素材/floor/1.jpg">
<p>服装</p>
<p>￥65</p>
</li>
</ul>
</div>
<div class="floor-img floor-hide">
<ul>
<li>
<img src="素材/floor/2.jpg">
<p>服装</p>
<p>￥65</p>
</li>
<li>
<img src="素材/floor/3.jpg">
<p>服装</p>
<p>￥65</p>
</li>
<li>
<img src="素材/floor/4.jpg">
<p>服装</p>
<p>￥65</p>
</li>
</ul>
</div>
<div class="floor-img floor-hide">
<ul>
<li>
<img src="素材/floor/5.jpg">
<p>服装</p>
<p>￥65</p>
</li>
<li>
<img src="素材/floor/6.jpg">
<p>服装</p>
<p>￥65</p>
</li>
</ul>
</div>
</div>
<div class="floor">
<div class="floor-part">
<div class='floor-part1'>
<span>3F</span>
<span>服装鞋包</span>
</div>
<div class='floor-part2'>
<span>热卖</span> |
<span>男装</span> |
<span>女装</span> |
</div>
</div>
<div class="floor-line"></div>
<div class="floor-img">
<ul>
<li>
<img src="素材/floor/1.jpg">
<p>服装</p>
<p>￥65</p>
</li>
<li>
<img src="素材/floor/1.jpg">
<p>服装</p>
<p>￥65</p>
</li>
<li>
<img src="素材/floor/1.jpg">
<p>服装</p>
<p>￥65</p>
</li>
<li>
<img src="素材/floor/1.jpg">
<p>服装</p>
<p>￥65</p>
</li>
<li>
<img src="素材/floor/1.jpg">
<p>服装</p>
<p>￥65</p>
</li>
<li>
<img src="素材/floor/1.jpg">
<p>服装</p>
<p>￥65</p>
</li>
</ul>
<ul>
<li>
<img src="素材/floor/1.jpg">
<p>服装</p>
<p>￥65</p>
</li>
<li>
<img src="素材/floor/1.jpg">
<p>服装</p>
<p>￥65</p>
</li>
<li>
<img src="素材/floor/1.jpg">
<p>服装</p>
<p>￥65</p>
</li>
<li>
<img src="素材/floor/1.jpg">
<p>服装</p>
<p>￥65</p>
</li>
<li>
<img src="素材/floor/1.jpg">
<p>服装</p>
<p>￥65</p>
</li>
<li>
<img src="素材/floor/1.jpg">
<p>服装</p>
<p>￥65</p>
</li>
</ul>
</div>
<div class="floor-img floor-hide">
<ul>
<li>
<img src="素材/floor/2.jpg">
<p>服装</p>
<p>￥65</p>
</li>
<li>
<img src="素材/floor/3.jpg">
<p>服装</p>
<p>￥65</p>
</li>
<li>
<img src="素材/floor/4.jpg">
<p>服装</p>
<p>￥65</p>
</li>
</ul>
</div>
<div class="floor-img floor-hide">
<ul>
<li>
<img src="素材/floor/5.jpg">
<p>服装</p>
<p>￥65</p>
</li>
<li>
<img src="素材/floor/6.jpg">
<p>服装</p>
<p>￥65</p>
</li>
</ul>
</div>
</div>
<div class="floor">
<div class="floor-part">
<div class='floor-part1'>
<span>4F</span>
<span>服装鞋包</span>
</div>
<div class='floor-part2'>
<span>热卖</span> |
<span>男装</span> |
<span>女装</span> |
</div>
</div>
<div class="floor-line"></div>
<div class="floor-img">
<ul>
<li>
<img src="素材/floor/1.jpg">
<p>服装</p>
<p>￥65</p>
</li>
<li>
<img src="素材/floor/1.jpg">
<p>服装</p>
<p>￥65</p>
</li>
<li>
<img src="素材/floor/1.jpg">
<p>服装</p>
<p>￥65</p>
</li>
<li>
<img src="素材/floor/1.jpg">
<p>服装</p>
<p>￥65</p>
</li>
<li>
<img src="素材/floor/1.jpg">
<p>服装</p>
<p>￥65</p>
</li>
<li>
<img src="素材/floor/1.jpg">
<p>服装</p>
<p>￥65</p>
</li>
</ul>
<ul>
<li>
<img src="素材/floor/1.jpg">
<p>服装</p>
<p>￥65</p>
</li>
<li>
<img src="素材/floor/1.jpg">
<p>服装</p>
<p>￥65</p>
</li>
<li>
<img src="素材/floor/1.jpg">
<p>服装</p>
<p>￥65</p>
</li>
<li>
<img src="素材/floor/1.jpg">
<p>服装</p>
<p>￥65</p>
</li>
<li>
<img src="素材/floor/1.jpg">
<p>服装</p>
<p>￥65</p>
</li>
<li>
<img src="素材/floor/1.jpg">
<p>服装</p>
<p>￥65</p>
</li>
</ul>
</div>
<div class="floor-img floor-hide">
<ul>
<li>
<img src="素材/floor/2.jpg">
<p>服装</p>
<p>￥65</p>
</li>
<li>
<img src="素材/floor/3.jpg">
<p>服装</p>
<p>￥65</p>
</li>
<li>
<img src="素材/floor/4.jpg">
<p>服装</p>
<p>￥65</p>
</li>
</ul>
</div>
<div class="floor-img floor-hide">
<ul>
<li>
<img src="素材/floor/5.jpg">
<p>服装</p>
<p>￥65</p>
</li>
<li>
<img src="素材/floor/6.jpg">
<p>服装</p>
<p>￥65</p>
</li>
</ul>
</div>
</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
var floorpart = $('.floor-part2 span');
console.log(floorpart)
var floorimg = $('.floor-img')
for (var t = 0; t < floorpart.length; t++) {
floorpart.eq(t).attr('fl-data', t);
floorpart.eq(t).click(function () {
var numimg = $(this).attr('fl-data');
for (var k = 0; k < floorpart.length; k++) {
floorimg.eq(k).hide()
}
floorimg.eq(numimg).show()
}
)
}
// var floor = $('.floor');
// for (var y = 0; y < floor.length; y++) {
// var floorpart = floor.eq(y).children('.floor-part2 span');
// console.log(floorpart)
// var floorimg = floor.eq(y).children('.floor-img')
// for (var t = 0; t < floorpart.length; t++) {
// floorpart.eq(t).attr('fl-data', t);
// floorpart.eq(t).click(function () {
// var numimg = $(this).attr('fl-data');
// for (var k = 0; k < floorpart.length; k++) {
// floorimg.eq(k).hide()
// }
// floorimg.eq(numimg).show()
// }
// )
// }
// }
</script>
</body>
</html>下面注释那本来是想用父元素遍历来解决的，但是并不起效果。。。麻烦老师帮忙看一下
0
收起
正在回答
2回答
你是一个按钻研的小朋友，从代码看出了你是一直在折腾代码，但是越是出不来越不能着急，你第二次的js中的问题有：
1、最外层的这个for循环，其实就是为了找出floor-img，找到它用得着用一个循环来做吗。直接var floorimg = $('.floor-img'); 不就有了吗？
2、总是从父元素里面找内容，有的东西直接就可以取到，直接用class选择器就拿到了，为什还要去绕一下呢，绕来绕去都把自己绕晕了。
3、当上面的一切都调整好之后，还存在一个问题，就是上条回复中我跟你说的，你点击当前的span，会显示其中的内容，但是其他楼层的都隐藏了，这个显然不符合要求，所以要通过当前被点击的元素，找到他的父元素，然后再找到对应的其他两个没有点击的元素进行内容的隐藏，$(this).parents(".floor").children(".floor-img").hide();
整体参考：
欢迎采纳！
Miss路
2018-07-18 10:38:02
同学你在提问的时候，一定要说明自己的需求哦，你要是先什么效果，这个一定要交代清楚，这样老师才能准确的为你找到问题。
你是要实现切换效果吗？如果是要实现切换的话，首先你没有注释掉的部分也是有问题的，你对照一下作业的效果视频，你的效果是当点击某一个选项的时候，其他所有的span都隐藏，这个操作显然是不合理的。正确的逻辑是，在本楼层中，点哪个哪个显示，其他的隐藏， 但是其他层是不受影响的。所以这里你可以单独的对每层去做隐藏显示的操作，用css的方式去做就可以了，可以用css的就不要用js，会更简单一些，通过控制显示属性，对每个选项控制隐藏显示，更通俗一点的说，当点击第二个的时候，给这个元素以及它下面的内容分别添加一个class，这两个class中分别定义的是按钮被选中时的样式，以及下面display：block，而其他的下面的内容都是默认display：none。
另外你说到的，通过父元素去找span是可以的，但是你不能通过floor去找span呀，你应该通过floor-part2去找span，通过floor去找span不是多次一举吗。
如果帮助到了你，欢迎采纳！
相似问题
登录后可查看更多问答，登录/注册
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星