Definir limite de botão seleccionar

votos
0

Este código tem 3 caixa, por clicado irá mudar para vermelho, como limitar apenas três deles podem ser selecionados?

Na quarta pode-se mostrar uma notificação ou alerta para os usuários.

eu preciso manter vários selecione a opção de fazer a cada um o botão tem animação diferente

Então, eu preciso manter as selecione 1 a 4. Obrigado por ler e ajudar.

$(document).ready(function() {
  $(.button.change).click(function() {
    $(button.change.selected);
    $(this).toggleClass(selected);
  });
  $(.button1.change).click(function() {
    $(button1.change.selected1);
    $(this).toggleClass(selected1);
  });

  $(.button2.change).click(function() {
    $(button1.change.selected2);
    $(this).toggleClass(selected2);
  });

  $(.button3.change).click(function() {
    $(button1.change.selected3);
    $(this).toggleClass(selected3);
  });

});



function descriptionComputer() {
  var x = document.getElementById(ComputerDIV);
  if (x.innerHTML ===  ) {
    x.innerHTML = description computer;
  } else {
    x.innerHTML =  ;
  }
}

function descriptionCalculus() {
  var x = document.getElementById(CalculusDIV);
  if (x.innerHTML ===  ) {
    x.innerHTML = description calculus;
  } else {
    x.innerHTML =  ;
  }
}

function descriptionPeridoicl() {
  var x = document.getElementById(PeridoiclDIV);
  if (x.innerHTML ===  ) {
    x.innerHTML = description peridoicl;
  } else {
    x.innerHTML =  ;
  }
}

function descriptionNone() {
  var x = document.getElementById(NoneDIV);
  if (x.innerHTML ===  ) {
    x.innerHTML = description None;
  } else {
    x.innerHTML =  ;
  }
}
.button {
  font-family: Calibri, sans-serif;
  width: 100px;
  height: 100px;
  background-color: green;
  background-repeat: no-reapeat;
}

.button1 {
  font-family: Calibri, sans-serif;
  font-size: 13px;
  font-weight: bold;
  width: 100px;
  height: 100px;
  background-color: green;
  background-repeat: no-reapeat;
}

.button2 {
  font-family: Calibri, sans-serif;
  font-size: 13px;
  font-weight: bold;
  width: 100px;
  height: 100px;
  background-color: green;
  background-repeat: no-reapeat;
}

.button3 {
  font-family: Calibri, sans-serif;
  font-size: 13px;
  font-weight: bold;
  width: 100px;
  height: 100px;
  background-color: green;
  background-repeat: no-reapeat;
}

.selected {
  background-color: red;
}

.selected1 {
  background-color: blue;
}

.selected2 {
  background-color: black;
}

.selected3 {
  background-color: white;
}
<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js></script>

<button onclick=descriptionComputer() class=button change></button>
<div id=ComputerDIV> </div>

<br><br>

<button class=button1 change onclick=descriptionCalculus()></button>
<div id=CalculusDIV> </div>

<br><br>
<button class=button2 change onclick=descriptionPeridoicl()></button>
<div id=PeridoiclDIV> </div>

<br><br>
<button class=button3 change onclick=descriptionNone()></button>

<div id=NoneDIV> </div>

Publicado 20/09/2018 em 04:11
fonte usuário
Em outras línguas...                            


3 respostas

votos
2

Y OU pode começar por aqui .. com apenas um clique evento para todos os botões de .buttonclasse .. há necessidade de usar mais classes .. então mudar todos os botões para ser buttonclasse .. então você pode usar if($(".button.change.selected").length < 3){para verificar os botões selecionados

$(document).ready(function() {
  $(".button.change").click(function() {
   var ThisEl = $(this);
   if($(".button.change.selected").length < 3  || ThisEl.hasClass('selected')){  // if less than 3 buttons selected
    ThisEl.toggleClass("selected");  // toggle the selected class
   }else{  // if over than 3
    console.log('you can select just 3');
   }
  });
});



function descriptionComputer() {
  var x = document.getElementById("ComputerDIV");
  if (x.innerHTML === " ") {
    x.innerHTML = "description computer";
  } else {
    x.innerHTML = " ";
  }
}

function descriptionCalculus() {
  var x = document.getElementById("CalculusDIV");
  if (x.innerHTML === " ") {
    x.innerHTML = "description calculus";
  } else {
    x.innerHTML = " ";
  }
}

function descriptionPeridoicl() {
  var x = document.getElementById("PeridoiclDIV");
  if (x.innerHTML === " ") {
    x.innerHTML = "description peridoicl";
  } else {
    x.innerHTML = " ";
  }
}

function descriptionNone() {
  var x = document.getElementById("NoneDIV");
  if (x.innerHTML === " ") {
    x.innerHTML = "description None";
  } else {
    x.innerHTML = " ";
  }
}
.button {
  font-family: Calibri, sans-serif;
  width: 100px;
  height: 100px;
  background-color: green;
  background-repeat: no-reapeat;
}

.button1 {
  font-family: Calibri, sans-serif;
  font-size: 13px;
  font-weight: bold;
  width: 100px;
  height: 100px;
  background-color: green;
  background-repeat: no-reapeat;
}

.button2 {
  font-family: Calibri, sans-serif;
  font-size: 13px;
  font-weight: bold;
  width: 100px;
  height: 100px;
  background-color: green;
  background-repeat: no-reapeat;
}

.button3 {
  font-family: Calibri, sans-serif;
  font-size: 13px;
  font-weight: bold;
  width: 100px;
  height: 100px;
  background-color: green;
  background-repeat: no-reapeat;
}

.selected {
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<button onclick="descriptionComputer()" class="button change"></button>
<div id="ComputerDIV"> </div>

<br><br>

<button class="button change" onclick="descriptionCalculus()"></button>
<div id="CalculusDIV"> </div>

<br><br>
<button class="button change" onclick="descriptionPeridoicl()"></button>
<div id="PeridoiclDIV"> </div>

<br><br>
<button class="button change" onclick="descriptionNone()"></button>

<div id="NoneDIV"> </div>

Nota: se você precisa para fazer o seu caminho com mais classes 1,2,3 você pode usar data-o atributo em vez de controlar cada ação do botão separadamente

Não se esqueça de mudar button1 button2, button3 classes para botão

E, embora, pessoalmente, eu não gosto de combinar em linha clique com jQuery clique você pode usar o seguinte código usando data-atributo com .next('div')para selecionar a próxima div para o botão em vez de usar idpara cada div

$(document).ready(function() {
  $(".button.change").click(function() {
   var ThisEl = $(this);
   var GetText = ThisEl.attr('data-text'); // get the text from data- attribute for this button
   var GetClass = ThisEl.attr('data-class'); // get the class from data- attribute for this button
   if($(".button.change.selected").length < 3 || ThisEl.hasClass('selected')){  // if less than 3 buttons selected
    ThisEl.toggleClass("selected "+ GetClass);  // toggle the selected class
    ThisEl.next('div').html(ThisEl.hasClass('selected') ? GetText : '');  // change the next div text
   }else{  // if over than 3
    console.log('you can select just 3');
   }
  });
});
.button {
  font-family: Calibri, sans-serif;
  width: 100px;
  height: 100px;
  background-color: green;
  background-repeat: no-reapeat;
}

.button1 {
  font-family: Calibri, sans-serif;
  font-size: 13px;
  font-weight: bold;
  width: 100px;
  height: 100px;
  background-color: green;
  background-repeat: no-reapeat;
}

.button2 {
  font-family: Calibri, sans-serif;
  font-size: 13px;
  font-weight: bold;
  width: 100px;
  height: 100px;
  background-color: green;
  background-repeat: no-reapeat;
}

.button3 {
  font-family: Calibri, sans-serif;
  font-size: 13px;
  font-weight: bold;
  width: 100px;
  height: 100px;
  background-color: green;
  background-repeat: no-reapeat;
}

.selected1 {
  background-color: red;
}
.selected2 {
  background-color: yellow;
}
.selected3 {
  background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<button class="button change" data-text="description computer" data-class="selected1"></button>
<div> </div>

<br><br>

<button class="button change" data-text="description calculus" data-class="selected2"></button>
<div></div>

<br><br>
<button class="button change" data-text="description peridoicl" data-class="selected3"></button>
<div> </div>

<br><br>
<button class="button change" data-text="description None" data-class="selected1"></button>

<div> </div>

Respondeu 20/09/2018 em 04:26
fonte usuário

votos
1

Tente seguir em que eu editei o código

$(document).ready(function() {
var ClickedButtonCount=0;
  $(".button").click(function() {
  debugger
  if(ClickedButtonCount<3)
  {
  if($(this).hasClass('selected'))
  {
    ClickedButtonCount--;
    $(this).removeClass('selected');
  }
  else if(ClickedButtonCount>=0)
  {
  ClickedButtonCount++;
  $(this).addClass('selected');
  }    
  }
  else
  {
  if($(this).hasClass('selected'))
  {
    ClickedButtonCount--;
    $(this).removeClass('selected');
  }
  else
  {
  alert('you can select Only 3 Box')
  }
  }
  });
});



function descriptionComputer() {
  var x = document.getElementById("ComputerDIV");
  if (x.innerHTML === " ") {
    x.innerHTML = "description computer";
  } else {
    x.innerHTML = " ";
  }
}

function descriptionCalculus() {
  var x = document.getElementById("CalculusDIV");
  if (x.innerHTML === " ") {
    x.innerHTML = "description calculus";
  } else {
    x.innerHTML = " ";
  }
}

function descriptionPeridoicl() {
  var x = document.getElementById("PeridoiclDIV");
  if (x.innerHTML === " ") {
    x.innerHTML = "description peridoicl";
  } else {
    x.innerHTML = " ";
  }
}

function descriptionNone() {
  var x = document.getElementById("NoneDIV");
  if (x.innerHTML === " ") {
    x.innerHTML = "description None";
  } else {
    x.innerHTML = " ";
  }
}
.button {
  font-family: Calibri, sans-serif;
  width: 100px;
  height: 100px;
  background-color: green;
  background-repeat: no-reapeat;
}

.button1 {
  font-family: Calibri, sans-serif;
  font-size: 13px;
  font-weight: bold;
  width: 100px;
  height: 100px;
  background-color: green;
  background-repeat: no-reapeat;
}

.button2 {
  font-family: Calibri, sans-serif;
  font-size: 13px;
  font-weight: bold;
  width: 100px;
  height: 100px;
  background-color: green;
  background-repeat: no-reapeat;
}

.button3 {
  font-family: Calibri, sans-serif;
  font-size: 13px;
  font-weight: bold;
  width: 100px;
  height: 100px;
  background-color: green;
  background-repeat: no-reapeat;
}

.selected {
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<button onclick="descriptionComputer()" class="button"></button>
<div id="ComputerDIV"> </div>

<br><br>

<button class="button" onclick="descriptionCalculus()"></button>
<div id="CalculusDIV"> </div>

<br><br>
<button class="button" onclick="descriptionPeridoicl()"></button>
<div id="PeridoiclDIV"> </div>

<br><br>
<button class="button" onclick="descriptionNone()"></button>

<div id="NoneDIV"> </div>

Respondeu 20/09/2018 em 04:29
fonte usuário

votos
0

Tente o seguinte código

$(document).ready(function() {
var ClickedButtonCount=0;
  $(".button.change").click(function() {
  debugger
   if(!ValidateSelectedCount($(this),'selected'))
   {
    if($(this).hasClass('selected'))
      {
      $("button.change.selected");
    $(this).toggleClass("selected");
descriptionComputer();
      }
      else
      {
      alert('you can select 3 box')
      }   
   }
   else
   {
   $("button.change.selected");
    $(this).toggleClass("selected");
descriptionComputer();
   }   
  });
  $(".button1.change").click(function() {
    if(!ValidateSelectedCount($(this),'selected1'))
   {
   if($(this).hasClass('selected1'))
      {
      $("button1.change.selected1");
    $(this).toggleClass("selected1");
    descriptionCalculus();
      }
      else
      {
      alert('you can select 3 box')
      }   
   }
   else
   {
   $("button1.change.selected1");
    $(this).toggleClass("selected1");
   descriptionCalculus();
   }    
  });

  $(".button2.change").click(function() {
     if(!ValidateSelectedCount($(this),'selected2'))
   {
   if($(this).hasClass('selected2'))
      {
      $("button2.change.selected2");
    $(this).toggleClass("selected2");
   descriptionPeridoicl();
      }
      else
      {
      alert('you can select 3 box')
      }   
   }
   else
   {
   $("button2.change.selected2");
    $(this).toggleClass("selected2");
    descriptionPeridoicl();
   }    
  });

  $(".button3.change").click(function() {
     if(!ValidateSelectedCount($(this),'selected3'))
   {
   if($(this).hasClass('selected3'))
      {
      $("button3.change.selected3");
    $(this).toggleClass("selected3");
    descriptionNone();
      }
      else
      {
      alert('you can select 3 box')
      }   
   }
   else
   {
   $("button3.change.selected3");
    $(this).toggleClass("selected3");
    descriptionNone();
   }    
  });
  
  function ValidateSelectedCount(Event,ClassName)
  {
     if(ClickedButtonCount<3)
    {
      if($(Event).hasClass(ClassName))
      {
      ClickedButtonCount--;
      }
      else if(ClickedButtonCount>=0)
      {
      ClickedButtonCount++;
      } 
      return true;
    }
    else
    {
      if($(Event).hasClass(ClassName))
      {
      ClickedButtonCount--;
      }
      else
      {
      return false;      
      }
    }
  }

});



function descriptionComputer() {
  var x = document.getElementById("ComputerDIV");
  if (x.innerHTML === " ") {
    x.innerHTML = "description computer";
  } else {
    x.innerHTML = " ";
  }
}

function descriptionCalculus() {
  var x = document.getElementById("CalculusDIV");
  if (x.innerHTML === " ") {
    x.innerHTML = "description calculus";
  } else {
    x.innerHTML = " ";
  }
}

function descriptionPeridoicl() {
  var x = document.getElementById("PeridoiclDIV");
  if (x.innerHTML === " ") {
    x.innerHTML = "description peridoicl";
  } else {
    x.innerHTML = " ";
  }
}

function descriptionNone() {
  var x = document.getElementById("NoneDIV");
  if (x.innerHTML === " ") {
    x.innerHTML = "description None";
  } else {
    x.innerHTML = " ";
  }
}
.button {
  font-family: Calibri, sans-serif;
  width: 100px;
  height: 100px;
  background-color: green;
  background-repeat: no-reapeat;
}

.button1 {
  font-family: Calibri, sans-serif;
  font-size: 13px;
  font-weight: bold;
  width: 100px;
  height: 100px;
  background-color: green;
  background-repeat: no-reapeat;
}

.button2 {
  font-family: Calibri, sans-serif;
  font-size: 13px;
  font-weight: bold;
  width: 100px;
  height: 100px;
  background-color: green;
  background-repeat: no-reapeat;
}

.button3 {
  font-family: Calibri, sans-serif;
  font-size: 13px;
  font-weight: bold;
  width: 100px;
  height: 100px;
  background-color: green;
  background-repeat: no-reapeat;
}

.selected {
  background-color: red;
}

.selected1 {
  background-color: blue;
}

.selected2 {
  background-color: black;
}

.selected3 {
  background-color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<button class="button change"></button>
<div id="ComputerDIV"> </div>

<br><br>

<button class="button1 change"></button>
<div id="CalculusDIV"> </div>

<br><br>
<button class="button2 change"></button>
<div id="PeridoiclDIV"> </div>

<br><br>
<button class="button3 change"></button>

<div id="NoneDIV"> </div>

Respondeu 20/09/2018 em 05:51
fonte usuário

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more