試圖使價值真正的點擊與if語句

Question

我想改變點擊jQuery中的顏色之間。根據圖片下面我有默認值

，然後這個圖像時，我點擊輸入框，然後再打開一個按鈕的背景顏色停留在輸入框，而不是dissappears中，當其他任何按鈕點擊。

我想背景顏色的任何按鈕被點擊時消失。

這裏是我的jQuery：

$("#donation-amount").click(function() { 

     if ($(this).hasClass('inpt-first')) { 
      $(this).css("background-color", "#c97e06"); 
      $("#default").removeClass('active'); 
      $("#btn2").removeClass('active'); 
      $("#btn3").removeClass('active'); 
     } 

     else{ 
      $(this).removeAttr("background-color") 
      $("#default").addClass('active'); 
     } 

    }); 

，這裏是我的html：

<div class="choose-pricing"> 
      <div class="btn-group"> 
      <div class="buttons"> 
      <button type="button" id="default" class="btn btn-default selectvalue hover-color active" value="50">50</button> 
      <button type="button" id="btn2" class="btn btn-default selectvalue hover-color" value="100">100</button> 
      <button type="button" id="btn3" class="btn btn-default selectvalue hover-color" value="150">150</button> 
      <input type="Custom" name="donation-amount" class="inpt-first form-control" id="donation-amount" onclick="if(this.defaultValue == this.value) this.value = ''" onblur="if(this.value=='') this.value = this.defaultValue" value="Custom"> 
      </div> 
      <input type="hidden" name="donation-amount-value" id="donation-amount-value"> 
      </div> 
      <div class="money-donate"> 
      <div class="display-amount" id="display-amount"> 
      </div> 
      </div> 
     </div> 
     </fieldset> 
    </div> 

任何幫助，將不勝感激！

Answer 1

嘗試

$(this).css("background-color", "") 

取而代之的是

$(this).removeAttr("background-color") 

您不能刪除background-color這樣的，因爲它不是一個屬性。

Answer 2

在按一下按鈕，你應該刪除類從獻血量

你所寫的內容將只作爲僅在自定義按鈕切換工作積極。它不與其他按鈕交互。

如果任何按鈕被擊中，並且自定義按鈕被擊中，則流程應該是從自定義按鈕中刪除類，並從任何按鈕中刪除類。

$(".selectvalue").each(function(){ 

    $(this).click(function(){ 
     $("#donation-amount").removeClass('active'); 
    }) 

    }); 

    $("#donation").click(function(){ 
     $(".selectvalue").removeClass('active'); 

    }) 

Answer 3

這是您正在查找的功能？在fiddle

相反的背景顏色也增加了，只需要使用.active類

 
 
    $('#donation-amount,#default, #btn2, #btn3').click(function(event) { 
 
    
 
    //add any other checks you want here 
 
    $("#default").removeClass('active'); 
 
    $("#btn2").removeClass('active'); 
 
    $("#btn3").removeClass('active'); 
 
    $("#donation-amount").removeClass('active'); 
 
    $(event.target).addClass('active'); 
 
    });

.active{ 
 
    background-color:#c97e06; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="choose-pricing"> 
 
      <div class="btn-group"> 
 
      <div class="buttons"> 
 
      <button type="button" id="default" class="btn btn-default selectvalue hover-color active" value="50">50</button> 
 
      <button type="button" id="btn2" class="btn btn-default selectvalue hover-color" value="100">100</button> 
 
      <button type="button" id="btn3" class="btn btn-default selectvalue hover-color" value="150">150</button> 
 
      <input type="Custom" name="donation-amount" class="inpt-first form-control" id="donation-amount" value="Custom"> 
 
      </div> 
 
      <input type="hidden" name="donation-amount-value" id="donation-amount-value"> 
 
      </div> 
 
      <div class="money-donate"> 
 
      <div class="display-amount" id="display-amount"> 
 
      </div> 
 
      </div> 
 
     </div>

Answer 4

我想這個代碼滿足您的要求。 如果你的問題沒有解決，然後寫評論解釋，然後我可以做到這一點。 請投票給我。

$("#donation-amount").click(function() { 

      if ($(this).hasClass('inpt-first')) { 
       console.log("hello"); 
       $(this).css("background-color", "#c97e06"); 
       $("#default").removeClass('active'); 
       $("#btn2").removeClass('active'); 
       $("#btn3").removeClass('active'); 
      } 
     }); 
     $("body").on("click","#default,#btn2, #btn3",function(){ 
      //console.log($(this)); 
       $("#donation-amount").css("background-color","rgb(255,255,255)"); 
       //$("#default").addClass('active'); 
     } 

Answer 5

這似乎有點複雜，你有它。這是一個經典的「選擇亮點」場景，可以通過簡單的$(this).addClass('active').siblings().removeClass('active');輕鬆處理，以設置和刪除活動高光。

我還冒昧地做出了你想要一些CUSTOM量的假設，所以我添加了一個簡單的輸入用於與CUSTOM按鈕一起使用。我還通過使用data屬性簡化了自定義按鈕，並從中刪除了代碼，坦率地說，它在那裏似乎很奇怪。

HTML進行一些調整：設置使用active類的顏色，並設置在隱藏字段的自定義的量（或默認，如果現在沒有）

$(".choice").on('click', function() { 
    if ($(this).is("#donation-amount")) { 
    var mydefault = $(this).data("defaultvalue"); 
    // use custom amount if it has one, otherwise use this custom default 
    this.value = $('#customamount').val() || mydefault; 
    } 
    $(this).addClass('active').siblings().removeClass('active'); 
    $('#donation-amount-value').val(this.value); 
    $('#display-amount').text('$'+this.value); 
}); 

CSS

<div class="choose-pricing"> 
    <div class="btn-group"> 
    <div class="buttons"> 
     <button type="button" class="btn btn-default selectvalue hover-color choice default active " value="50">50</button> 
     <button type="button" class="btn btn-default selectvalue hover-color choice" value="100">100</button> 
     <button type="button" class="btn btn-default selectvalue hover-color choice" value="150">150</button> 
     <button type="button" class="btn btn-default selectvalue hover-color choice" value="" id="donation-amount" data-defaultvalue="57">Custom</button> 
    </div> 
    <input type="hidden" name="donation-amount-value" id="donation-amount-value"> 
    </div> 
    <div class="money-donate"> 
    <div class="display-amount" id="display-amount"> 
    </div> 
    </div> 
</div> 
<div class="container">Custom Amount 
    <input id="customamount" type="text" value="67" /> 
</div> 

代碼：

.active { 
    background-color: #c97e06; 
} 

你可以在這裏玩弄它：https://jsfiddle.net/MarkSchultheiss/6Lj62ngs/1/