Resume counting if you exceed options

Asked

Viewed 49 times

0

This question will probably be answered in less than 5 minutes of so easy, but I’m cracking my head...

I’m going to simplify a lot here, but I think I can understand:

I create elements by javascript, each has its background color, are 8 colors that are in classes. (. back1, . back2...).

But there are only 8 colors, as I do to create more than 8 elements count back to 0?

NOTE: I know you can do this only in a simple way without using variables... But today is not my day here or at uncle google.

Sample code:

$(function(){
  $("#adicionar").on("click",function(e){
    $("#teste").append("<div class='fundo"+ ($("#teste div").length+1) +"'></div>");
    e.preventDefault();
  });
});
#teste div{
  float:left;
  clear: left;
  width:40px;
  height: 40px;
  margin: 2px;
}
.fundo1{
  background-color: #000;
}
.fundo2{
  background-color: #00F;
}
.fundo3{
  background-color: #0FF;
}
.fundo4{
  background-color: #F00;
}
.fundo5{
  background-color: #FF0;
}
.fundo6{
  background-color: #FA0;
}
.fundo7{
  background-color: #0F0;
}
.fundo8{
  background-color: #F0F;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="teste">
</div>
<a href="#" id="adicionar">Adicionar</a>

javascript jquery

3 answers

1

If you don’t want the colors exactly in that order, you can generate a random value between 1 and 8:

$(function(){
  $("#adicionar").on("click",function(e){
  var num = Math.floor((Math.random() * 8) + 1);
    $("#teste").append("<div class='fundo"+ num +"'></div>");
    e.preventDefault();
  });
});
#teste div{
  float:left;
  clear: left;
  width:40px;
  height: 40px;
  margin: 2px;
}
.fundo1{
  background-color: #000;
}
.fundo2{
  background-color: #00F;
}
.fundo3{
  background-color: #0FF;
}
.fundo4{
  background-color: #F00;
}
.fundo5{
  background-color: #FF0;
}
.fundo6{
  background-color: #FA0;
}
.fundo7{
  background-color: #0F0;
}
.fundo8{
  background-color: #F0F;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="teste">
</div>
<a href="#" id="adicionar">Adicionar</a>

  • Thank you, I thought of that possibility too. But as there are only 8 options has a lot of repetition and ends up getting a bit ugly the result for the user, so just exceed the standard of 8 same. (usually there will be no more than 6, but we need to prepare for that user who abuses the common sense hehe)

0

$(function(){
  //cria uma variavel para saber qual a contagem
  var contador = 0;
  $("#adicionar").on("click",function(e){
    // alimenta + 1 na variável;
    contador ++;
    // se ela for mais que 8, volta a ter o valor 1
    if(contador > 8){
      contador = 1;
    }
    $("#teste").append("<div class='fundo" + contador + "'></div>");
    e.preventDefault();
  });
});

  • Valeu caio , but I didn’t want to use variables, I remembered how to do it, I poked around in some old codes here and I got the light in my head

  • Out of curiosity, because there are no variables?

  • I am creating a project and I want to make everything as simple as possible, so that it is easy to read and try anyway to make the code short.

  • 1

    Code without variable is not necessarily cleaner or easy to read code, not using it can do just the opposite

  • Yes, in addition to generating more processing.

0

So, I just remembered how it’s done, I apologize for taking up your time.

Just use %, in case:

var num=NUMERO_ATUAL % MÁXIMO;

This will keep within my maximum range. So following my example:

$(function(){
  $("#adicionar").on("click",function(e){
    $("#teste").append("<div class='fundo"+ (($("#teste div").length % 8)+1) +"'></div>");
    e.preventDefault();
  });
});
#teste div{
  float:left;
  clear: left;
  width:40px;
  height: 40px;
  margin: 2px;
}
.fundo1{
  background-color: #000;
}
.fundo2{
  background-color: #00F;
}
.fundo3{
  background-color: #0FF;
}
.fundo4{
  background-color: #F00;
}
.fundo5{
  background-color: #FF0;
}
.fundo6{
  background-color: #FA0;
}
.fundo7{
  background-color: #0F0;
}
.fundo8{
  background-color: #F0F;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="teste">
</div>
<a href="#" id="adicionar">Adicionar</a>

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.