jquery页面中多个tab切换，循环应用mouseenter事件

这个业务逻辑多少都有点奇怪了，阅读浏览次数增值在新闻详情页的控制器方法里setInc，这怎么还写进模型事件里了。如果非要用onAfterRead也可以，把新闻文章的内容单独分出来一个news_content表，然后把它和news做关联，然后给news_content表的onAfterRead事件做增值处理，这样点进新闻页内查询到文章内容时才会触发它。: 评 TP6模型事件-查询后onAfterRead不好用

文章标签更多

ThinkPHP (254)

Mysql (58)

DedeCms (33)

jQuery (67)

证件照 (1)

尺寸大小 (2)

背景颜色 (1)

setInc (4)

setDec (4)

onclick (5)

友情链接更多

超纯水设备

免费设计

海报设计

快递查询

打开边栏(ESC) 关闭边栏(ESC)

jquery页面中多个tab切换，循环应用mouseenter事件

效果

from clipboard

页面中有多个tab切换，用的mouseenter事件，就想着循环定义mouseenter事件,不就省事了吗，结果出问题了

1，如果手动写死，一个tab框，写一个mouseenter事件，可以正常运行

from clipboard

2，如果获取tab框的个数，循环定义mouseenter事件，则没有效果

from clipboard

不知道为什么

console.log(".floor_bd_"+i+" .tab_con");

打印出来是.floor_bd_3 .tab_con

页面中，就.floor_bd_1，.floor_bd_2没有3，当然获取不到了，

但不知道为什么

3，解决方法：给tab切换单独封装一个函数，循环调用这个函数，并传递对应参数

from clipboard

3.1发现新的办法，把for循环里面的var改成let，这样就可以轻松解决这个问题了

from clipboard

4，附完整代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Swiper demo</title>

  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="https://unpkg.com/swiper@6/swiper-bundle.min.css">

  <!-- Demo styles -->
  <style>
    :root{
  --font-red: #ff2708;
  --font-gray: #8c8c8c;
  --border-red: #df2003;
  --border-gray:#eee;
}
     /* 楼层 */
.floor_hd_lt{
  color: #333;
  font-size: 21px;
  line-height: 38px;
  letter-spacing: 2px;
}
.floor_hd_rt a{
  font-size: 14px;
  height: 15px;
  letter-spacing: 1px;
  padding: 8px 12px 8px 12px;
}
.floor_hd_rt a.active{
  color: var(--font-red);
}
.floor_bd{
  height: 66px;
}
.tab_con{
  display: none;
}
.tab_con.active{
  display: flex;
}
.floor_bd_lt{
  width: 256px;
  height: 66px;
}
.floor_bd_lt img{
  width: 256px;
  height: 66px;
}
.floor_bd_rt .img{
  text-align: center;
}
.floor_bd_rt .img img{
  width: 180px;
  height: 180px;
  transition:all linear .2s;
}
.floor_bd_rt .img img:hover{
  transform:scale(1.05);
}
.floor_bd_rt .title{
  height: 38px;
}
.floor_bd_rt .price{
  font-size: 16px;
  color: var(--font-red);
}
.floor_bd_rt .price span{
  font-size: 12px;
}
.floor_bd_rt .price i{
  font-size: 16px;
  cursor: pointer;
}
.floor_bd_rt_box{border-right:1px solid var(--border-gray);border-bottom:1px solid var(--border-gray);transition:all ease .4s;}
.floor_bd_rt_box:hover{border-right:1px solid #fff; border-bottom:1px solid #fff; -webkit-box-shadow:0 0 10px #cfcfcf; -moz-box-shadow:0 0 10px #cfcfcf; box-shadow:0 0 10px #cfcfcf; }
  </style>
</head>

<body>
  <div class="floor mt-4">
    <div class="floor_hd d-flex justify-content-between">
      <div class="floor_hd_rt floor_hd_rt_1">
        <a href="{:url('home/goods/lists','catId='.$vo['catId'])}" class="active">热门</a>
        <a href="">栏目1</a>
      </div>
    </div>
  <div class="floor_bd floor_bd_1 bg-white">
    <div class="tab_con active">
      内容1
    </div>
    <div class="tab_con">
      内容2
    </div>
  </div>
  </div>
  <div class="floor mt-4">
    <div class="floor_hd d-flex justify-content-between">
      <div class="floor_hd_rt floor_hd_rt_2">
        <a href="{:url('home/goods/lists','catId='.$vo['catId'])}" class="active">热门</a>
        <a href="">栏目1</a>
      </div>
    </div>
  <div class="floor_bd floor_bd_2 bg-white">
    <div class="tab_con active">
      内容3
    </div>
    <div class="tab_con">
      内容4
    </div>
  </div>
  </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>

  <!-- Initialize Swiper -->
  <script>
    $(function() {	
      var num = $(this).find("div[class='floor mt-4']").length; // 楼层数量
      for(var i=1;i<=num;i++){
        tab(".floor_hd_rt_"+i+" a",".floor_bd_"+i+" .tab_con");
      }
      function tab(a,b){
        $(a).mouseenter(function() {
          console.log(a);
          $(this).addClass("active").siblings().removeClass("active");
          $(b).eq($(this).index()).addClass("active").siblings().removeClass("active");
        })
      }
    })
  </script>

</body>

</html>

赏

前一篇

jquery选择器实例

后一篇

“最难不过坚持”

本人承接扒站仿站，php网站维护，病毒查杀，网站编辑，网站改版，html制作

jquery选择器实例

jQuery关于$(function(){});里面的函数不...