如何在div上单击而不是在按钮上添加/删除div颜色？

Question

我有一个添加和删除按钮，用于选择整个div并为div添加绿色。该功能仅在“添加此额外内容”和“删除”按钮上起作用。如何使其像单击div上的任意位置（而不是特定按钮本身）一样起作用？

我希望听到你们的帮助。

关于， 比拉（Bilal）

$('.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>

Answer 2

更改

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

到

$(e.currentTarget).closest("div.card-border").on('click', function(e) {

如果您想要切换功能，还可以添加一个保存crt状态的变量：

var state="default";
...on('click',function(){
    if(state=='default'){
        state='checked';
        ....
    } else {
        state='default';
        ....
    }
});

Answer 3

如果我理解您的问题是正确的，那么您正在寻找答案。

  <!DOCTYPE html>
    <html>
    <body>


    <p id="demo"  onclick="myFunction()" style="width:200px; height:100px; border: 1px solid black;">
    This Div's background color will change.
    </p>

    <script>
    var color=0; 
    function myFunction() {
      // Just Specify The Id you need 
      var myDiv = document.getElementById("demo");

      if(color == 0)
      {
       myDiv.style.backgroundColor = "red"; color=1;
      }
      else
      {
        myDiv.style.backgroundColor = "white"; color=0;
      }
      
    }
    </script>

    </body>
    </html>

希望这可以解决问题。