根据输入值更改 div 的不透明度

Question

我有一个信用卡输入和一组图标（万事达卡、签证、发现、美国运通）。

当我在信用卡输入中输入有效的主卡号时，我希望主卡图标的不透明度为 1。其余图标和有效的信用卡号也是如此。

html:

<div class="payment-cc-type">
  <div class="payment-cc-icon">
  <div id="american_express" class="cc-opacity"></div>
  <div id="visa" class="cc-opacity"></div>
  <div id="master_card" class="cc-opacity"></div>
  <div id="discover" class="cc-opacity"></div>
  </div>
  <%= f.text_field :cc_type %>
</div>
<div class="payment-cc-number">
  <%= f.label :cc_number, 'Number' %>
  <%= f.text_field :cc_number %>
</div>

js:

$(document).ready(function(){
$("#payment_cc_number").change(function(){
    $('.cc-opacity').val(getCreditCardType($(this).val())).css('opacity', 1);

});
});

function getCreditCardType(accountNumber)
{

//start without knowing the credit card type
var result = "unknown";

//first check for MasterCard
if (/^5[1-5]/.test(accountNumber))
{
    result = "MasterCard";
}

//then check for Visa
else if (/^4/.test(accountNumber))
{
    result = "Visa";
}

//then check for AmEx
else if (/^3[47]/.test(accountNumber))
{
    result = "American Express";
}
//then check for Discover
else if (/^6011/.test(accountNumber))
{
    result = "Discover";
}

return result;
}

使用此代码，所有图标的不透明度都变为 1，而不是特定的。

Answer 1

试试这个

$("#payment_cc_number").change(function(){
    //Get Card
    var card = getCreditCardType($(this).val());
    $('.cc-opacity').val(card);

    //As you have defined ids as visa etc
    card = card.toLowerCase().replace(/\s/g, '_')
    $('#'+card).css('opacity', 1);
});