如何做jQuery边框启动卡点击？

Question

我是新手。我希望通过点击事件突出显示一个与jQuery的点击卡。但不知道该怎么做。这是我的卡片和我的卡片的图片。因此，我希望有一种正确的方法，将绿色的边框保留在所选的卡片上：

我在下面写了这些行，以突出显示卡片，在其中添加一个边框类，然后在html上显示它。但这不管用：

​

jQuery(document).ready(function($) {
  $('#card').select();
});

$('card').addClass('border').value('green');
$('card').click(function() {
  $('#card border').html('show');
});

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

<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" onclick="highlight(this)">
        <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" onclick="highlight(this)">
        <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" onclick="highlight(this)">
        <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" onclick="highlight(this)">
        <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>

​

Answer 1

我对Bootstrap 4也不太在行，我会这样做：

$('.card').on('click', function (e) {
  $('.card').css('border-color', '')
  $(this).css('border-color', 'green')
});

第一行移除所有卡上的边框颜色。第二行将单击卡片上的边框颜色设置为绿色。