jQuery点击按钮换一批效果

Html

Css

Js

    
幸福家庭
    
幸福家庭
    
幸福家庭
    
幸福家庭


    
亲子娱乐
    
爸妈游
    
蜜月旅行
    
朋友聚会


    
1
    
2
    
3
    
4


    
1
    
2
    
3
    
4


    
a
    
a
    
a
    
a


    
a
    
a
    
a
    
a


    
b
    
b
    
b
    
b


    
b
    
b
    
b
    
b



换一批 

* { margin:0; padding:0; text-decoration:none; list-style:none; } .list1 { display:flex; margin:0 auto; } .list1 li { flex:1; border-radius:0.25em; height:2.5em; text-align:center; line-height:2.5em; margin:0.625em 0.32em; } .listchange2,.listchange3,.listchange4 { display:none; } .huan { text-align:center; font-family:"微软雅黑"; font-size:1em; color:#999999; }

var bcjson = ["#ff9900", "#3dbeb6", "#a3eee9", "#f8cd8c"]; var cjson = ["#fff", "black"]; $(function() { $(".list1").children("li").each(function() { $(this).css({ "background-color": bcjson[Math.floor(Math.random() * 4)], "color": cjson[Math.floor(Math.random() * 2)] }); }) }) //代表第一次换的是第二组 var listitem = 2; //这是要换的批数 var listitemmax = 4; $(".huan").click(function() { $(".listchange" + listitem).siblings("ul").css("display", "none"); $(".listchange" + listitem).css("display", "flex"); if (listitem < listitemmax) { listitem++; } else { listitem = 1; } });

↑上面代码改变，会自动显示代码结果

jQuery调用版本：1.11.3

多加一组就是在html中加两个ul listchange类后面数字改为递增

发布时间：2018-1-15 23:43

例：

<ul class="list1 listchange5">
    <li>5</li>
    <li>5</li>
    <li>5</li>
    <li>5</li>
</ul>  
<ul class="list2 listchange5">
    <li>5</li>
    <li>5</li>
    <li>5</li>
    <li>5</li>
</ul>

style内将listchange5改成dispaly:none;

js内把要换的批数也加1: var listitemmax=5;