jquery实现换一批内容

jquery实现换一批内容

//静态

//html部分

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;

box-sizing: border-box;
}
ul li{
list-style: none;
}
a,a:active,a:hover {
color: black;
text-decoration: none;

}
.changeone{
100%;
height: 140px;
border-bottom:8px solid #eeeeee;
font-size: 14px;
}

.changeone ul{
100%;
display: flex;
flex-wrap: wrap;
height: 80px;
}

.changeone ul li{
flex: 1;
25%;
min- 25%;
padding: 5px;
text-align: center;
margin-top: 10px;
}
.changeone ul li span{
padding: 4px 5px;
border: 1px solid #fe7702;
border-radius: 6px;
}

.huan{
text-align:center;
font-family:"微软雅黑";
color:gray;
font-size: 16px;
font-weight: bold;
}

.huanbox{
margin-top: 10px;
text-align: center;
}
</style>
</head>
<body>

<div class="changeone">
<ul>
<li><a href="#"><span>情侣旅行</span></a></li>
<li><a href="#"><span>情侣旅行</span></a></li>
<li><a href="#"><span>情侣旅行</span></a></li>
<li><a href="#"><span>情侣旅行</span></a></li>
<li><a href="#"><span>情侣旅行</span></a></li>
<li><a href="#"><span>情侣旅行</span></a></li>
<li><a href="#"><span>情侣旅行</span></a></li>
<li><a href="#"><span>情侣旅行</span></a></li>

<li><a href="#"><span>亲子旅行</span></a></li>
<li><a href="#"><span>亲子旅行</span></a></li>
<li><a href="#"><span>亲子旅行</span></a></li>
<li><a href="#"><span>亲子旅行</span></a></li>
<li><a href="#"><span>亲子旅行</span></a></li>
<li><a href="#"><span>亲子旅行</span></a></li>
<li><a href="#"><span>亲子旅行</span></a></li>
<li><a href="#"><span>亲子旅行</span></a></li>

<li><a href="#"><span>新婚旅行</span></a></li>
<li><a href="#"><span>新婚旅行</span></a></li>
<li><a href="#"><span>新婚旅行</span></a></li>
<li><a href="#"><span>新婚旅行</span></a></li>
</ul>

<div class="huanbox"><a href="javascript:void(0)"><span class="huan">换一批</span></a> </div>
</div>

<script src="../jquery/jquery1.11.3.js"></script>

<script type="text/javascript">
var changeindex=1;
var clickindex=2;
$(".changeone li").each(function(index,element){
if(index/8<changeindex){

element.className="change"+changeindex;
}else{
changeindex++;
element.className="change"+changeindex;
}
})
$(".change1").siblings().css("display","none");
$(".change1").show();
$(".huan").click(function(){
if(clickindex<=changeindex){
$(".change"+clickindex).siblings().css("display","none");
$(".change"+clickindex).show();
clickindex++;
}else{
clickindex=1;
$(".change"+clickindex).siblings().css("display","none");
$(".change"+clickindex).show();

//判断clickindex=1时让它继续累加下去不然判断条件不成立需要点击第二次才触发
if(clickindex==1){
$(".change"+clickindex).siblings().css("display","none");
$(".change"+clickindex).show();
clickindex++;
}
}

});
</script>
</body>
</html>

//动态

<div class="new-q-t-list">

　　<div class="q-t-list-01" title="">'

　　　　+ renderList2(item.qlist.list) +

　　'</div>

<p class="huan huanYiPi">换一批</p>

</div>

//鼠标悬停时显示多条问题

          $(".title-name").hover(function(){

            var that=this

            //给名字为2个字的设置间距

            $('.nickname-sp2').each(function(){

              var that=this

              var nickSize=$(that).children(".nickname-l2").text().length

              if(nickSize==2){

                $(that).children(".nickname-l2").css({"letter-spacing":"1em","margin-right":"-1em"})

              }

            })

            //隔行换色偶数行

            $(".q-t-list-01").each(function(){

              var that=this

              $(that).children('.q-t-list-01 a:odd').css( 'background-color', '#f6f6f6')

            })

            //换一批内容

            var changeindex=1;

            var clickindex=2;

              //寻找鼠标悬停时里面的内容再循环

              $(that).parent().parent().siblings(".new-q-t-list").children(".q-t-list-01").find("a").each(function(index,element){

                var that=this

                if(index/10<changeindex){

                  $(that).addClass("change"+changeindex)

                }else{

                  changeindex++;

                  $(that).addClass("change"+changeindex)

                }

              })

              $(".change1").siblings().css("display","none");

              $(".change1").show();

              $(".huan").click(function(){

                if(clickindex<=changeindex){

                  $(".change"+clickindex).siblings().css("display","none");

                  $(".change"+clickindex).show();

                  clickindex++;

                }else{

                  clickindex=1;

                  $(".change"+clickindex).siblings().css("display","none");

                  $(".change"+clickindex).show();

　　　　　

　　　　　//判断clickindex=1时让它继续累加下去不然判断条件不成立点击第二次才触发

                  if(clickindex==1){

                    $(".change"+clickindex).siblings().css("display","none");

                    $(".change"+clickindex).show();

                    clickindex++;

                  }

                }

              });

            $(that).parent().parent().siblings(".new-q-t-list").show()

            $(".new-q-t-list").hover(function(){

              var that=this

              $(that).css("display","block")

            },function(){

              $(".new-q-t-list").hide()

            })

          },function(){

            // var that = this;

            // setTimeout(()=>{

            // $(that).parent().siblings(".new-q-t-list").hide();

            $(".new-q-t-list").hide()

          // },500)

          })

//效果图
相关阅读:
Java8新特性Stream详细教程
 自定义注解！绝对是程序员装逼的利器！！
如何处理重复请求/并发请求的
 C#字符处理
 mysql 索引
 mysql事件【定时器】
JS日期，金钱处理
 Controller中使用@Value无法获取属性值
 druid连接池的配置
 mybatiste报错java.lang.ClassCastException
原文地址：https://www.cnblogs.com/chenshaoxiong/p/13297213.html