表单按钮作为选项但不是下拉菜单

Question

在我收到的 psd 中，有多个按钮可以选择价格。我想创建列出价格的方形海军按钮，因此当用户单击按钮时，背景会更改为不同的颜色，并且值会保存在电子邮件中。我该怎么做呢？我试过这个

$( "input[type=button]" ).click(function() {
 $(this).css("background-color","#0073a8");
});

另外，如果您看到我编写此代码的更好方法，请告诉我。

<form> 
    <input type="button" value="$25">
    <input type="button" value="$50">
    <input type="button" value="$100">
    <input type="button" value="$500">
    <input type="button" value="$100">
    <input type="button" value="OTHER"> 
    <fieldset>
        <legend>make this a monthly gift</legend>
        <input type="checkbox" name="checkboxG1" id="checkboxG1" class="css-checkbox" /><label for="checkboxG1" class="css-label">Your sustaining gift will automatically repeat each month until you decide to cancel it. You will directly impact the success of the Open the Floodgates campaign and our search for a cure for cystic fibrosis.</label> 
        </legend>
    </fieldset> 
    <fieldset>
        <legend>your information</legend>
        <span>
        <label>First Name</label>
        <input type="text" name="firstname">
        </span> 
        <span>
        <label>Last Name</label>
        <input type="text" name="lastname">
        </span> 
        <span>
        <label> Address</label>
        <input type="text" name="mail">
        </span> 
        <span>
        <label>Phone</label>
        <input type="text" name="phone">
        </span>
        </legend>
    </fieldset> 
    <fieldset>
        <legend>credit card information</legend>
        <span>
        <label>Card Holder’s Name</label>
        <input type="text" name="firstname">
        </span> 
        <span>
        <label>Credit Card Number</label>
        <input type="text" size="20" data-stripe="number"/>
        </span> 
        <span>
        <label>Card CVC</label>
        <input class="cardcvc" type="text" size="4" data-stripe="cvc"/>
        </span> 
        <span>
        <label>Credit Card Expiration</label>
        <input type="text" size="2" data-stripe="exp-month"/>/<input type="text" size="4" data-stripe="exp-year"/>
        </span>
        </legend>
    </fieldset> 
    <button type="reset" onclick="alert('Thank you!')">DONATE</button> 
</form>

Answer 1

使用 $.addClass() 代替 $.css()：

var el = $(this);
el.addClass('value-' + el.val().replace('$', ''));

CSS：

.value-25 { background: red; }
.value-50 { background: green; }
etc.