Question

我编写了以下脚本，以在页面上的框上添加边框：

<script>
 function highlight(target) {
  target.style.border = "1px solid red";
 }
</script>

但是，我想：

限制用户只能突出显示/选择3个框
允许用户再次单击它们以“取消边界”或“突出显示”这些框。

我尝试将以下代码添加到该函数中，但是没有用。

target.onclick = null;

这怎么办？

Answer 1

限制用户只能突出显示/选择3个框

首先，您可以具有一个全局变量，该变量将保存已检查项目的数量。如下所示：

 var selected_items = 0;
 function highlight(target) {
  if(selected_items < 3){
    target.style.border = "1px solid red";
    // add 1 each time an item is selected
    selected_items += 1;
  }
  target.style.border = "1px solid red";
 }

允许用户再次单击它们以“取消边界”或“突出显示”这些框。   对于第二个，您可以检查border的当前值是否为空。   因此您的代码将如下所示：

 var selected_items = 0;
 function highlight(target) {
  // check if the current border is empty (or if default one is sth else you can replace it with the "" and put your desired border value)
  if(target.style.border == ""){
    if(selected_items < 4){
       target.style.border = "1px solid red";
       selected_items += 1;
    }
  }
  else{
    target.style.border = "";
    selected_items -= 1;
  }

 }

最后，我建议您添加一个类或删除一个类以使项目具有边框，而不是直接更改项目。对于将来的其他购买也将更容易。

Answer 2

您可以通过以下操作来做到这一点：保留一个包含选定元素数量的变量，并使用css类作为“选定”状态，并添加它，并适当地将其从元素中删除：

var boxes = document.querySelectorAll(".box");
var numSelected = 0;
var maxSelected = 3;
for(var i = 0;i<boxes.length;i++){
    boxes[i].addEventListener("click", function(){        
        if(this.classList.contains("selected")){
            this.classList.remove("selected");
            numSelected--;
        }
        else if(numSelected<maxSelected){
            this.classList.add("selected");
            numSelected++;
        }
    });
}

.box {
  height:20px;
  width: 20px;
  background-color: grey;
  margin: 2px
}

.selected {
  border: 1px solid red;
}

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

单击时从框添加/删除边框的Javascript函数

2 个答案: