Bootstrap Snippet change multi bg-color of element on multiple times click using HTML CSS jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
    <div class="row">
        <button class="clickMe">Click Me Multiple Times !!</button>
    <br />
    <br />
    <div id="coloredDiv1" data-index="-1"></div>
    </div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
#coloredDiv1{
    width:200px;
    height:200px;
    border:1px solid #888444;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var colors = ['#093fhhh', "#00ff00", "#ff0000", "#000000"];
$(document).ready(function () {
    $colorDiv1 = $('#coloredDiv1');
    ln = colors.length;
    $('.clickMe').on("click", function () {
        var i = $colorDiv1.data("index");
        ++i;
        if (i >= ln) i = 0;
        $colorDiv1.css({
            'background-color': colors[i]
        });
        $colorDiv1.data("index", i);
    });
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"change multi bg-color of element on multiple times click"
Bootstrap 4.1.1 Snippet by skjalal99

Related: See More

Questions / Comments:

"change multi bg-color of element on multiple times click" Bootstrap 4.1.1 Snippet by skjalal99

Related: See More

Questions / Comments:

"change multi bg-color of element on multiple times click"
Bootstrap 4.1.1 Snippet by skjalal99