使用Javascript在单击框时向框添加边框

我编写了一个函数来“突出显示”通过在“产品框”周围添加红色边框单击的“产品框”。但是，我希望用户能够同时选择最多3个框。到目前为止，我的函数将边框添加到1，之后什么也不做

        <div class="col-md-9"><!-- col-md-9 Begin (Category Listed on Top) -->
          <?php

          getpcatpro();

          $get_products = "select * from products order by rand() LIMIT 0,9";
          $run_products = mysqli_query($con,$get_products);

          while($row_products=mysqli_fetch_array($run_products)){

            $pro_id = $row_products['product_id'];
            $pro_title = $row_products['product_title'];
            $pro_img1 = $row_products['product_img1'];
            $pro_link = $row_products['product_link'];

            echo "
            <div class='col-md-4 col-sm-6'>
              <div class='product' id='product-box' onclick='highlight();'>
                  <center>
                  <img class='img-responsive' src='admin_area/product_images/$pro_img1' style='margin-top: 5%;'>
                  </center>
                <div class='text'>
                  <center>
                    <a href='$pro_link' style='color: black;'> $pro_title </a>
                  </center>
                </div>
              </div>
            </div>  ";
          }
          ?>

          <script> <!-- Script to add border around journal box on click -->
            function highlight(){
              document.getElementById('product-box').style.border = "1px solid red";
            }
          </script>

        </div>

您可以将DOM元素直接传递到highlight函数中：

 <div class='product' onclick="highlight(this)">

或者，您可以使用classList.add向按钮添加多个样式

function addOutline(target){
    target.classList.add('add-outline');
}

这里有一个小提琴
ID必须是唯一的。因此，既然您有
getElementById（'product-box'）
我假设您正在复制它们，正如您所看到的，这是行不通的。您只需将$pro_id添加到相关的box id:
id='product-box-$pro_id'
哇，工作得很好，谢谢！你知道怎么做吗。使它们不可拾取，2。将其限制为3个亮点？1。您可以通过添加以下行删除高亮显示like中的处理程序：
target.onclick=null2。您可能必须在渲染方法/while循环中计算该值，并且在迭代器达到3时不添加onclick处理程序。我是否将其添加到target.style.border=“1px solid red”下？我只是试了一下，但还是没能让他们脱光
function addOutline(target){
    target.classList.add('add-outline');
}