javascript - 使用 Javascript 向框 onClick 添加边框

Question

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

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

标签： javascript

Answer 1

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

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

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