javascript - 如何添加/删除 div 颜色 onclick 而不是按钮？

Question

我有一个添加和删除按钮，它选择完整的 div 并向 div 添加绿色。该功能仅适用于“添加此额外”和“删除”按钮。我如何让它像单击 div 上的任意位置而不是特定按钮本身一样工作？

我希望听到你们的帮助。

问候，比拉尔

$('.btn_extras').addClass('force-hide');
$('.btn-rmv-item').hide();

// Add btn onClick
$('.btn-add-item').on('click', function(e) {

  e.preventDefault();

  // Show the Adjacent Remove Button
  $(e.currentTarget).next("button.btn-rmv-item").show();
  // Apply THE DIV class to SELECTED
  $(e.currentTarget).closest("div.card-border").addClass('card-bg');
  // Show THE btn_extra button
  showHideContinueBtn();
  // Hide the Button
  $(e.currentTarget).hide();
});

// Remove btn onClick
$('.btn-rmv-item').on('click', function(e) {

  e.preventDefault();

  // Show the Adjacent Remove Button
  $(e.currentTarget).prev("button.btn-add-item").show();
  // Apply THE DIV class to SELECTED
  $(e.currentTarget).closest("div.card-border").removeClass('card-bg');
  // Show THE btn_extra button
  showHideContinueBtn();
  // Hide the Button
  $(e.currentTarget).hide();
});

// function to Show/Hide Continue Button w.r.t SELECTIONS
function showHideContinueBtn() {
  $('.btn_extras').addClass('force-hide').removeClass('force-block');
  $('.btn_skip').removeClass('force-hide').addClass('force-block');
  $('div.card').each(function(index) {
    if($(this).hasClass('card-bg')) {
      $('.btn_extras').removeClass('force-hide').addClass('force-block');
      $('.btn_skip').removeClass('force-block').addClass('force-hide');
    }
  });
}

.card-border {
  border: 1px solid #c7c7c7;
  border-radius: .25rem;
  padding: 15px 18px 10px 18px;
  margin-bottom: 30px;
}

div.ho-border:hover {
  border: 1px solid #59d389;
}

.upsell-pricing {
  float: right;
  font-size: 18px;
  font-weight: 600;
}

.upsell-text {
  font-size: 15px;
  margin-top: 10px;
  color: #333333;
}

.btn-add-item {
  font-weight: 600;
  letter-spacing: -0.02px;
  text-transform: none;
  padding: 3px 10px 3px 10px;
  margin-left: 20px;
  margin-top: 1px;
  color: #c7c7c7;
  opacity: 0.65;
}

.btn-add-item:focus {
  outline: none;
  box-shadow: none;
}

.btn-rmv-item {
  background-color: transparent;
  color: #59d389;
  font-weight: 600;
  letter-spacing: -0.02px;
  text-transform: none;
  padding: 3px 8px 3px 8px;
  margin-left: 20px;
  margin-top: 1px;
}

.btn-rmv-item:focus {
  outline: none;
  box-shadow: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Fuel Replacement -->
<div class="card-border ho-border">
  <h4 class="float-left">Fuel replacement</h4>
  <div class="upsell-pricing">£49/trip</div>
  <div class="clearfix"></div>
  <div class="upsell-text">Save time and return the vehicle at any fuel level. The price include upto a full tank of petrol/gas.</div>
  <div class="mt-3 float-right">
    <button class="btn btn-add-item">Add this extra</button>
    <button class="btn btn-rmv-item">Remove</button>
  </div>
  <div class="clearfix"></div>
</div>

Answer 1

您可以直接在 div 上设置点击处理程序(我假设这里是 .card-border)。

而且你只需要一个按钮来切换类和更改文本。

我添加了一个 .card-bg CSS 规则，这个规则似乎在问题中丢失了......
我还添加了 type="button" 以防止在单击按钮时提交表单。

看看下面代码中的注释。它替换您拥有的两个点击处理程序...以及showHideContinueBtn() 函数。

$(".card-border").on("click",function(){

  // Toggle the div background color
  $(this).toggleClass("card-bg");
  
  // Find the button
  var btn = $(this).find(".btn");
  
  // Toggle classes for ONE button
  btn.toggleClass('btn-add-item btn-rmv-item');
  
  // Depending on a button's class, change it's text
  (btn.hasClass("btn-rmv-item"))?btn.text("Remove"):btn.text("Add this extra");
});

.card-border {
  border: 1px solid #c7c7c7;
  border-radius: .25rem;
  padding: 15px 18px 10px 18px;
  margin-bottom: 30px;
}

div.ho-border:hover {
  border: 1px solid #59d389;
}

.upsell-pricing {
  float: right;
  font-size: 18px;
  font-weight: 600;
}

.upsell-text {
  font-size: 15px;
  margin-top: 10px;
  color: #333333;
}

.btn-add-item {
  font-weight: 600;
  letter-spacing: -0.02px;
  text-transform: none;
  padding: 3px 10px 3px 10px;
  margin-left: 20px;
  margin-top: 1px;
  color: #c7c7c7;
  opacity: 0.65;
}

.btn-add-item:focus {
  outline: none;
  box-shadow: none;
}

.btn-rmv-item {
  background-color: transparent;
  color: #59d389;
  font-weight: 600;
  letter-spacing: -0.02px;
  text-transform: none;
  padding: 3px 8px 3px 8px;
  margin-left: 20px;
  margin-top: 1px;
}

.btn-rmv-item:focus {
  outline: none;
  box-shadow: none;
}

/* This class was not posted in question... So I improvised one */ 
.card-bg{
  background-color:#44bb44;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Fuel Replacement -->
<div class="card-border ho-border">
  <h4 class="float-left">Fuel replacement</h4>
  <div class="upsell-pricing">£49/trip</div>
  <div class="clearfix"></div>
  <div class="upsell-text">Save time and return the vehicle at any fuel level. The price include upto a full tank of petrol/gas.</div>
  <div class="mt-3 float-right">
    <button type="button" class="btn btn-add-item">Add this extra</button>
    <!--button class="btn btn-rmv-item">Remove</button-->
  </div>
  <div class="clearfix"></div>
</div>