老师这个楼层怎么封装

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

371

372

373

374

375

376

377

378

379

380

381

382

383

384

385

386

387

388

389

390

391

392

393

394

395

396

397

398

399

400

401

402

403

404

405

406

407

408

409

410

411

412

413

414

415

416

417

418

419

420

421

422

423

424

425

426

427

428

429

430

431

432

433

434

435

436

437

438

439

440

441

442

443

444

445

446

447

448

449

450

451

452

453

454

455

456

457

458

459

460

461

462

463

464

465

466

467

468

469

470

471

472

473

474

475

476

477

478

479

480

481

482

483

484

485

486

487

488

489

490

491

492

493

494

495

496

497

498

499

500

501

502

503

504

505

506

507

508

509

510

511

512

513

514

515

516

517

518

519

520

521

522

523

524

525

526

527

528

529

530

531

532

533

534

535

536

537

538

539

540

541

542

543

544

545

546

547

548

549

550

551

552

553

554

555

556

557

558

559

560

561

562

563

564

565

566

567

568

569

570

571

572

573

574

575

576

577

<!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>&nbsp;&nbsp;|&nbsp;&nbsp;
<span>男装</span>&nbsp;&nbsp;|&nbsp;&nbsp;
<span>女装</span>&nbsp;&nbsp;|&nbsp;&nbsp;
</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>&nbsp;&nbsp;|&nbsp;&nbsp;
<span>男装</span>&nbsp;&nbsp;|&nbsp;&nbsp;
<span>女装</span>&nbsp;&nbsp;|&nbsp;&nbsp;
</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>&nbsp;&nbsp;|&nbsp;&nbsp;
<span>男装</span>&nbsp;&nbsp;|&nbsp;&nbsp;
<span>女装</span>&nbsp;&nbsp;|&nbsp;&nbsp;
</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>&nbsp;&nbsp;|&nbsp;&nbsp;
<span>男装</span>&nbsp;&nbsp;|&nbsp;&nbsp;
<span>女装</span>&nbsp;&nbsp;|&nbsp;&nbsp;
</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>

下面注释那本来是想用父元素遍历来解决的，但是并不起效果。。。麻烦老师帮忙看一下

慕无忌6236884 2018-07-17

源自：项目：JQ实现瀑布流 5-2 作业题

收起

2回答

Miss路回答被采纳获得+3积分 2018-07-18 15:26:50

你是一个按钻研的小朋友，从代码看出了你是一直在折腾代码，但是越是出不来越不能着急，你第二次的js中的问题有：

1、最外层的这个for循环，其实就是为了找出floor-img，找到它用得着用一个循环来做吗。直接var floorimg = $('.floor-img'); 不就有了吗？

2、总是从父元素里面找内容，有的东西直接就可以取到，直接用class选择器就拿到了，为什还要去绕一下呢，绕来绕去都把自己绕晕了。

3、当上面的一切都调整好之后，还存在一个问题，就是上条回复中我跟你说的，你点击当前的span，会显示其中的内容，但是其他楼层的都隐藏了，这个显然不符合要求，所以要通过当前被点击的元素，找到他的父元素，然后再找到对应的其他两个没有点击的元素进行内容的隐藏，$(this).parents(".floor").children(".floor-img").hide();

整体参考：

欢迎采纳！

收起回答

慕无忌6236884 提问者 #1

懂了懂了。。。谢谢老师

2018-07-18 17:21:51

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不是多次一举吗。

如果帮助到了你，欢迎采纳！

收起回答

提问者慕无忌6236884 #1

没把问题说清楚不好意思，也非常感谢老师那么详细的回答，css的方案我会了，就是js的方案不解决我浑身难受。。。我按照您说的把父元素的问题解决了，但是又出现了新的问题，就是我只有点击最后一一个楼层即4F的span才有切换效果，其它楼层没有效果，能不能麻烦您在帮我看一下

2018-07-18 13:16:36
提问者慕无忌6236884 #2

var floor = $('.floor') var floorpart2 = $('.floor-part2'); for (var y = 0; y < floor.length; y++) { var floorpart = floorpart2.eq(y).children('span'); console.log(floorpart) var floorimg = floor.eq(y).children('.floor-img') for (var t = 0; t < floorpart.length; t++) { console.log(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() } ) } }

2018-07-18 13:16:56
提问者慕无忌6236884 #3

不对，是点击所有楼层的SPAN效果都在最后一层显示了，为什么呢

2018-07-18 13:18:54