将限制设置为按钮选择

时间：2018-09-20 04:11:07

标签： php jquery html

此代码有3个框，单击将变为红色，如何限制只能选择其中三个？

第四行可能会向用户显示通知或警报。

我需要保留几个选择选项，以使每个按钮具有不同的动画

所以我需要保持选择1到4。 感谢您的阅读和帮助。

$(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>

3 个答案:

答案 0 :(得分：2)

Y 您可以从这里开始..所有按钮.button class只需单击一次..无需使用更多的类..因此，将所有按钮更改为{{ 1}}类..然后您可以使用button来检查所选按钮

if($(".button.change.selected").length < 3){
$(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;
}

注意：如果您需要使用更多的1,2,3类，可以使用<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>属性来分别控制每个按钮操作

  

别忘了将button1，button2，button3类更改为button

虽然我个人不喜欢将内联点击与jquery点击结合使用，但是可以通过将data-属性与data-一起使用来选择下一个代码，而不是使用{每个div {1}} 

.next('div')
id
$(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');
   }
  });
});

答案 1 :(得分：1)

尝试遵循（我在其中编辑您的代码）

$(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>

答案 2 :(得分：0)

尝试遵循代码 

$(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>

相关问题
最新问题