jquery for a number of

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery换一批(原创)-jq22.com</title>
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
* {
    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 = left : Center ; 
    font-Family : "Microsoft yahei" ; 
    font-size : 1em ; 
    Color : # 999999 ; 
} 
</ style > 
</ head > 
< body > 

< UL class = "List1 listchange1 " > 
    < li > happy family </ li > 
    < li > happy family </ li > 
    <li >Happy family </ li > 
    < li > happy family </ li > 
</ ul > 
< ul class = "List1 listchange1" > 
    < li > paternity Entertainment </ li > 
    < li > parents tour </ li > 
    < li > Honeymooners </ li > 
    < li > friends </ li > 
</ ul > 
< ul class = "list1 listchange2">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<ul class="list1 listchange2">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<ul class="list1 listchange3">
    <li>a</li>
    <li>a</li>
    <li>a</li>
    <li>a</li>
</ul>
<ul class="list1 listchange3">
    <li>li</a>
    <li>a</li>
    <li>a</li>
    <li>a</li>
</ul>
<ul class="list1 listchange4">
    <li>b</li>
    <li>b</li>
    <li>b</li>
    <li>b</li>
</ul>
<ul class="list1 listchange4">
    <li>b</li>
    <li>b</li>
    <li>b</li>
    <li>b</li>
</ul>


<div style="text-align: center;"><button class="huan">换一批</button> </div>

<script>
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 )] 
        }); 
    } ) 

}) 
// represents the change in time of the second group 
var ListItem =  2 ; 

// this is the wish to change the number of batches 
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;
    }
});
</script>

</body>
</html>
jquery for a number of

Guess you like
