Question

我试图在点击jquery时改变颜色。根据下图，我有默认值

然后在此图像中，当我单击输入框然后返回按钮时，背景颜色保留在输入框上，而不是在单击任何其他按钮时消失。

我希望单击任何按钮时背景颜色消失。

这是我的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

点击按钮，您应该从捐款金额中删除有效课程

您所写的内容仅适用于仅在自定义按钮上切换。它不与其他按钮互动。

Flow应该是从自定义按钮中删除类，如果有任何按钮被击中，如果点击自定义按钮，则从任何按钮中删除类。

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

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

    });

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

    })

Answer 3

这是您正在寻找的功能吗？也添加在fiddle

中

而不是背景颜色，只需使用.active类

＆＃13;

    
  $('#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');
  });

＆＃13;

.active{
  background-color:#c97e06;
}

＆＃13;

<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>

＆＃13;

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

这看起来有点复杂。这是一个经典的选择亮点＆＃34;使用简单的$(this).addClass('active').siblings().removeClass('active');轻松处理方案，以设置和删除活动突出显示。

我也冒昧地假设你想要一些CUSTOM数量，所以我添加了一个简单的输入，用于CUSTOM按钮。我还通过使用data属性简化了自定义按钮，并从中删除了代码，坦率地说，在那里看起来很奇怪。

带有一些调整的HTML：

<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类设置颜色的代码，并在隐藏字段中设置自定义数量（如果没有，则设置为默认值）

$(".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：

.active {
  background-color: #c97e06;
}

您可以在此处使用它：https://jsfiddle.net/MarkSchultheiss/6Lj62ngs/1/

尝试使用if语句单击时使值为true

5 个答案: