试图使价值真正的点击与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/