如何通过jQuery实现点击Bootstrap卡片时添加绿色边框高亮？

你的代码里有几个关键问题导致无法实现点击卡片加绿色边框的功能：

• 选择器错误：你用了$('#card')和$('card')，但实际页面里没有id为card的元素，卡片容器的id是card_0/card_1这类，卡片本身是带有.card类的div
• 方法使用错误：value('green')不是设置边框颜色的正确方法，$('#card border')这种选择器也不符合语法
• 代码执行时机错误：部分JS代码写在jQuery(document).ready()外面，DOM还没加载完成就执行，根本找不到元素
• 未定义highlight函数：HTML里的onclick="highlight(this)"没有对应的函数实现

下面是修正后的完整代码：

1. 自定义CSS高亮类 #

先添加一段自定义样式，定义绿色高亮边框：

<style>
.highlight-border {
  border: 3px solid #28a745 !important; /* 用Bootstrap原生绿色，!important确保覆盖原有样式 */
}
</style>

2. 修正后的HTML结构 #

保留原有布局，可去掉冗余的onclick属性（用jQuery绑定事件更整洁）：

<link href="//netdna.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<style>
.highlight-border {
  border: 3px solid #28a745 !important;
}
</style>

<div class="container">
  <center>
    <h6>My cards below</h6>
  </center>
  <div id="content">
    <div class="row">
      <div type="button" id="card_0" class="col-xl-3 col-sm-6 mb-xl-0 mb-4" name="card_title_0">
        <div class="card">
          <div class="card-header p-3 pt-2">
            <div class="icon icon-lg icon-shape bg-gradient-dark shadow-dark text-center border-radius-xl mt-n4 position-absolute">
              <i class="material-icons opacity-10">login</i>
            </div>
            <div class="text-end pt-1">
              <p class="text-sm mb-0 text-capitalize">card_title_0</p>
              <h4 class="mb-0">card_value_0</h4>
            </div>
          </div>
          <hr class="dark horizontal my-0">
          <div class="card-footer p-3">
            <p class="mb-0"><span class="text-success text-sm font-weight-bolder">card_percent_0 % </span> actuellement
            </p>
          </div>
        </div>
      </div>
      <div type="button" id="card_1" class="col-xl-3 col-sm-6 mb-xl-0 mb-4" name="card_title_1">
        <div class="card">
          <div class="card-header p-3 pt-2">
            <div class="icon icon-lg icon-shape bg-gradient-primary shadow-primary text-center border-radius-xl mt-n4 position-absolute">
              <i class="material-icons opacity-10">person</i>
            </div>
            <div class="text-end pt-1">
              <p class="text-sm mb-0 text-capitalize">card_title_1</p>
              <h4 class="mb-0">card_value_1</h4>
            </div>
          </div>
          <hr class="dark horizontal my-0">
          <div class="card-footer p-3">
            <p class="mb-0"><span class="text-success text-sm font-weight-bolder">card_percent_1 % </span> since now</p>
          </div>
        </div>
      </div>
      <div type="button" id="card_2" class="col-xl-3 col-sm-6 mb-xl-0 mb-4" name="card_title_2">
        <div class="card">
          <div class="card-header p-3 pt-2">
            <div class="icon icon-lg icon-shape bg-gradient-info shadow-info text-center border-radius-xl mt-n4 position-absolute">
              <i class="material-icons opacity-10">person</i>
            </div>
            <div class="text-end pt-1">
              <p class="text-sm mb-0 text-capitalize">card_title_2</p>
              <h4 class="mb-0">card_value_2</h4>
            </div>
          </div>
          <hr class="dark horizontal my-0">
          <div class="card-footer p-3">
            <p class="mb-0"><span class="text-danger text-sm font-weight-bolder">card_percent_2 %</span> since now</p>
          </div>
        </div>
      </div>
      <div type="button" id="card_3" class="col-xl-3 col-sm-6 mb-xl-0 mb-4" name="card_title_3">
        <div class="card">
          <div class="card-header p-3 pt-2">
            <div class="icon icon-lg icon-shape bg-gradient-success shadow-success text-center border-radius-xl mt-n4 position-absolute">
              <i class="material-icons opacity-10">person</i>
            </div>
            <div class="text-end pt-1">
              <p class="text-sm mb-0 text-capitalize">card_title_3</p>
              <h4 class="mb-0">card_value_3</h4>
            </div>
          </div>
          <hr class="dark horizontal my-0">
          <div class="card-footer p-3">
            <p class="mb-0"><span class="text-success text-sm font-weight-bolder">card_percent_3% </span> since now</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

3. 正确的jQuery代码 #

把所有JS代码放在document.ready里，确保DOM加载完成后执行，同时实现点击高亮、其他卡片取消高亮的逻辑：

jQuery(document).ready(function($) {
  // 绑定所有卡片容器的点击事件
  $('[id^="card_"]').click(function() {
    // 移除所有卡片的高亮类
    $('.card').removeClass('highlight-border');
    // 给当前点击的容器内的卡片添加高亮类
    $(this).find('.card').addClass('highlight-border');
  });
});

如果想保留HTML里的onclick="highlight(this)"，也可以这样定义highlight函数：

jQuery(document).ready(function($) {
  window.highlight = function(element) {
    $('.card').removeClass('highlight-border');
    $(element).find('.card').addClass('highlight-border');
  }
});

这样点击任意卡片，就会给对应的卡片加上绿色边框，且每次只有一个卡片保持高亮状态。

内容的提问来源于stack exchange，提问作者Fusion