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

希望這能解決問題。