Question

您好，我正在设计一个网站。对于我的网页，我将按钮设置为图像。我们可以从列表中选择图像，但是如何设置所选图像的数量限制。当用户尝试转到另一个页面时，如果他们选择了3张以上的图像，我们可以向他们发出警报。这是简单的代码。我已经看到有些人使用输入类型来做，但是我可以添加，因为按钮将什么也不显示。

$(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 = " ";
  }
}

<style>.Button {
  font-family: Calibri, sans-serif;
  width: 100px;
  height: 100px;
  background-image: url(ComputerI.png);
  background-repeat: no-reapeat;
}

.button1 {
  font-family: Calibri, sans-serif;
  font-size: 13px;
  font-weight: bold;
  width: 100px;
  height: 100px;
  background-image: url(calculusO.png);
  background-repeat: no-reapeat;
}

.button2 {
  font-family: Calibri, sans-serif;
  font-size: 13px;
  font-weight: bold;
  width: 100px;
  height: 100px;
  background-image: url(periodicO.png);
  background-repeat: no-reapeat;
}

.button3 {
  font-family: Calibri, sans-serif;
  font-size: 13px;
  font-weight: bold;
  width: 100px;
  height: 100px;
  background-image: url(calculusO.png);
  background-repeat: no-reapeat;
}

.selected {
  background: url(ComputerO.png);
}

.selected1 {
  background: url(calculusI.png);
}

.selected2 {
  background: url(periodicI.png);
}

.selected3 {
  background: url(calculusI.png);
}

</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>

  <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>

Answer 1

转到下一页的功能可以简单地计算所选框的数量：

 // change for both click 
 $(document).on('click','#anotherbutton',function(){
    // code
 });

但是您需要对所有框使用相同的function nextPage() { var selectCount = $(".change.selected").length; if (selectCount > 3) { alert("You've selected too many classes"); } else { window.location = "nextpage.html"; } }类，而不是selected，selected等。

完整代码：

selected1

$(document).ready(function() {
  $(".change").click(function() {
    $(this).toggleClass("selected");
  });
});



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 = " ";
  }
}

function nextPage() {
    var selectCount = $(".change.selected").length;
    if (selectCount > 3) {
        alert("You've selected too many classes");
    } else {
        window.location = "nextpage.html";
    }
}

.Button {
  font-family: Calibri, sans-serif;
  width: 100px;
  height: 100px;
  background-image: url(ComputerI.png);
  background-repeat: no-reapeat;
}

.button1 {
  font-family: Calibri, sans-serif;
  font-size: 13px;
  font-weight: bold;
  width: 100px;
  height: 100px;
  background-image: url(calculusO.png);
  background-repeat: no-reapeat;
}

.button2 {
  font-family: Calibri, sans-serif;
  font-size: 13px;
  font-weight: bold;
  width: 100px;
  height: 100px;
  background-image: url(periodicO.png);
  background-repeat: no-reapeat;
}

.button3 {
  font-family: Calibri, sans-serif;
  font-size: 13px;
  font-weight: bold;
  width: 100px;
  height: 100px;
  background-image: url(calculusO.png);
  background-repeat: no-reapeat;
}

.button1.selected {
  background: url(ComputerO.png);
}

.button2.selected {
  background: url(calculusI.png);
}

.button3.selected {
  background: url(periodicI.png);
}

.button4.selected {
  background: url(calculusI.png);
}

选择按钮的限制

1 个答案: