creating loop in jquery

Question

I'm trying to build a function that changes background(color a), box(color b) and text color(color a) when a user clicks on the refresh button. I've set the color array, but couldn't figure out how to loop the array properly. Could anyone please help?

var colors = [
["#808080", "#f08080"],
["#2f4f4f", "#cdcdc1"],
["#F3E4C3", "#191970"],
["#DD5C3D", "#495496"],
["#ffbdbd", "#bdffff"],
["#c9c9ff", "#282833"],
["#fff5ee", "#4682b4"]]

I think I can do something like this below:

     $("#refresh").click(function(){
        $("box").animate({
            backgroundColor: colors[0][1],
        }, 500);
        $("box").css("color", colors[0][0]);
        $("background").animate({
            backgroundColor: colors[0][0],
        }, 500);
        //add something that triggers loop here
        });

And my html below:

<body>
<section id="main" class="box" style="margin-bottom: 10px">
    <div id="city"></div>
    <div id="detail"></div>
    <div id="icon"></div>
    <div id="temperature"></div>
    <div id="fcicon" class="inrow">
        <div id="f">F</div><div style="opacity: 0.5">/</div><div id="c">C</div>
    </div>
    <div id="refresh"><i class="fa fa-refresh"></i></div>
</section>

So you're animating three DOM elements -- a box element, a section element and a background element -- that aren't in your HTML. Yeah, they're not going to animate that way. — Snowmonkey
– Snowmonkey, Commented Dec 18, 2017 at 20:01
What does the loop do? Or do you mean every time they hit refresh you select the next color in the array? This question is unclear. — Erik Philips
– Erik Philips, Commented Dec 18, 2017 at 20:02
Hi @ErikPhilips, yep that's what i'm trying to figure out. the refresh button should lead to the next color pair in the array. — bom
– bom, Commented Dec 18, 2017 at 20:04

abhinash · Accepted Answer · 2017-12-18 20:09:48Z

3

I don't think you need a loop. Try the code below. However i would recommend you to make separate css classes and toggle between them.

var colors = [["#808080", "#f08080"],
              ["#2f4f4f", "#cdcdc1"],
              ["#F3E4C3", "#191970"],
              ["#DD5C3D", "#495496"],
              ["#ffbdbd", "#bdffff"],
              ["#c9c9ff", "#282833"],
              ["#fff5ee", "#4682b4"]];

$(document).on(function(){
    var i=0;
    $("#refresh").click(function(){
        if(colors.length==i+1){
            i=0;
        }else{
            i=i+1;
            $("box").animate({
                backgroundColor: colors[i][1],
            }, 500);
            $("section").animate({
                backgroundColor: colors[i][0],
            }, 500);
            $("background").animate({
                backgroundColor: colors[i][0],
            }, 500);
    });
        }
});

answered Dec 18, 2017 at 20:09

abhinash

18810 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

bom Over a year ago

ah this is definitely a simple and easy solution!

Snowmonkey · Accepted Answer · 2018-02-05 19:07:48Z

1

Edited my example to use your HTML, works great. I changed the class from .container to .box, as that's what you're using.

Here it is as a fiddle, in case.

// Array of color pairs that we'll use for background
//  colors, text colors and border colors.
var colors = [
  ["#808080", "#f08080"],
  ["#2f4f4f", "#cdcdc1"],
  ["#F3E4C3", "#191970"],
  ["#DD5C3D", "#495496"],
  ["#ffbdbd", "#bdffff"],
  ["#c9c9ff", "#282833"],
  ["#fff5ee", "#4682b4"]
];

// The counter refers to which pair in the array we're
//   currently referencing.
var counter = 0;

// When the refresh div gets clicked, 
$("#refresh").click(function() {
  // check the counter and increment or reset it.
  if (counter >= colors.length - 1) {
    counter = 0;
  } else {
    counter++
  }
  // Now, we want to animate CSS attributes on the
  //  container object. We'll use the color pair 
  //  we're currently pointing to for the background
  //  text and border colors.
  $(".box").animate({
    backgroundColor: colors[counter][1],
    color: colors[counter][0],
    borderColor: colors[counter][0]
  }, 500);
});

.box {
  position: relative;
  border: 1px solid blue;
  height: 200px;
  width: 200px;
}
.box #city {
  font-weight: bolder;
  font-size: 14px;
}
#refresh {
  position: absolute;
  bottom: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<section id="main" class="box" style="margin-bottom: 10px">
    <div id="city">Worcester, MA</div>
    <div id="detail"></div>
    <div id="icon"></div>
    <div id="temperature"></div>
    <div id="fcicon" class="inrow">
        <div id="f">F</div><div style="opacity: 0.5">/</div><div id="c">C</div>
    </div>
    <div id="refresh"><i class="fa fa-refresh"></i></div>
</section>

Added comments to make it a bit easier to follow.

edited Feb 5, 2018 at 19:07

answered Dec 18, 2017 at 20:09

Snowmonkey

3,7611 gold badge18 silver badges16 bronze badges

2 Comments

bom Over a year ago

thank you so so much for the detailed break down on each line!

Snowmonkey Over a year ago

I find, if i don't comment my code thoroughly at least during the prototyping, I'm going to break something and not understand why. Glad it helped.

DeSpider · Accepted Answer · 2017-12-18 20:19:24Z

1

you can simply keep track of the index by creating a closure.

function looper(){
    let i = 0;
    return function(){
       $("box").animate({
        backgroundColor: colors[i][1],
       }, 500);
       $("section").animate({
        backgroundColor: colors[i][0],
       }, 500);
       $("background").animate({
        backgroundColor: colors[i][0],
       }, 500);

       i++;
       if(i === colors.length){
          i = 0;
        }
   }
}

let change = looper();

now you can listen for the event and call the function "change" accordingly.

answered Dec 18, 2017 at 20:19

DeSpider

3232 silver badges16 bronze badges

Comments

Erik Philips · Accepted Answer · 2017-12-18 20:29:22Z

So I would store the value in the element via data(). Makes it really easy and reusable. Take a moment and read Decoupling Your HTML, CSS, and JavaScript.

The following code is reusable and extensible. Reusable by allowing multiple buttons to have different targets to refresh. Extensible by allowing you to add as many items to the animate as you want. Honestly I'd just put the color in the js-refresh button so each refresh button can have it's own array.

$(document).ready(()=>{
  var colors = [
    ["#808080", "#f08080"],
    ["#2f4f4f", "#cdcdc1"],
    ["#F3E4C3", "#191970"],
    ["#DD5C3D", "#495496"],
    ["#ffbdbd", "#bdffff"],
    ["#c9c9ff", "#282833"],
    ["#fff5ee", "#4682b4"]];

  $(".js-refresh").on('click', (e) => {
    var $this = $(e.currentTarget);
    var selector = $this.data('refresh-target');
    $(selector).each((i,e)=>{
      var $this = $(e);
      var idx = $this.data('js-refresh-index') || 1;
      idx = idx >= colors.length ? 1 : idx + 1;
      $this
        .data('js-refresh-index', idx)
        .stop()
        .animate({
          backgroundColor: colors[idx-1][0],
        }, 1)
        .animate({
          backgroundColor: colors[idx-1][1],
        }, 500);
    })
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script
  src="https://code.jquery.com/color/jquery.color-2.1.2.min.js"
  integrity="sha256-H28SdxWrZ387Ldn0qogCzFiUDDxfPiNIyJX7BECQkDE="
  crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<section id="main" class="box" style="margin-bottom: 10px">
    <div id="city"></div>
    <div id="detail"></div>
    <div id="icon"></div>
    <div id="temperature" class="refresh-1">Temp</div>
    <div id="fcicon" class="inrow">
        <div id="f">F</div><div style="opacity: 0.5">/</div><div id="c">C</div>
    </div>
    <div class="js-refresh" data-refresh-target=".refresh-1">
      <i class="fa fa-refresh"></i>
    </div>
    </section>

oh wow! this is a very advanced level solution for me haha. i'll definitely read the article you shared with me. thank you soo much erik!!

John Dover · Accepted Answer · 2017-12-18 22:40:38Z

JQuery Animate from their docs

Animation Properties and Values

All animated properties should be animated to a single numeric value, except as noted below; most properties that are non-numeric cannot be animated using basic jQuery functionality (For example, width, height, or left can be animated but background-color cannot be, unless the jQuery.Color plugin is used). Property values are treated as a number of pixels unless otherwise specified. The units em and % can be specified where applicable.

My Html and JavaScript

<!DOCTYPE html>
<html>
<head>
    <title>Animate</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
    <div class="row">
        <select id="colors">
            <option value="BlueWhite">Background: Blue, Color: White</option>
            <option value="YellowBlue">Background: Yellow, Color: Blue</option>
            <option value="WhiteRed">Background: White, Color: Red</option>
            <option value="BlackWhite">Background: Black, Color: White</option>
        </select>
        <div id="main" class="box" style="margin-bottom: 10px">
            <div id="city"></div>
            <div id="detail"></div>
            <div id="icon"></div>
            <div id="temperature"></div>
            <div id="fcicon" class="inrow">
                <div id="f">F</div><div style="opacity: 0.5">/</div><div id="c">C</div>
            </div>
        </div>
        <button id="refresh" class="btn btn-primary"><i class="fa fa-refresh"></i></button>
    </div>
    <script>
        $(document).ready(function () {
            var colors = {
                "BlueWhite": {
                    "Background": "#0000ff",
                    "Color": "#ffffff"
                },
                "YellowBlue": {
                    "Background": "#FFFF00",
                    "Color": "#0000ff"
                },
                "WhiteRed": {
                    "Background": "#ffffff",
                    "Color": "#ff0000"
                },
                "BlackWhite": {
                    "Background": "#000000",
                    "Color": "#ffffff"
                }
            };
            $("#refresh").click(function () {
                var selected = $("#colors").val();
                var colorObj;
                if(colors[selected] != undefined) {
                  colorObj = colors[selected];
                } else {
                  colorObj = colors["BlackWhite"];
                }
                $("#main").animate({
                    backgroundColor: colorObj.Background,
                    color: colorObj.Color
                }, function () {
                    $(this).css("backgroundColor", colorObj.Background).css("color", colorObj.Color);
                });
            });
        });
    </script>
</body>
</html>

Collectives™ on Stack Overflow

creating loop in jquery

5 Answers 5

1 Comment

2 Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

2 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related