如何在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 wrt 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> 

希望这能解决问题。