1

別のIE 不透明度の質問を投稿したことを前もってお詫びしますが、少なくとも 30 の異なるページ (多くは SO で) を読みましたが、うまくいきません。

ユーザーが cardnumber<input>フィールドに入力した最初の文字に基づいて、米国の 4 つの主要なクレジット カードの種類 (Visa、MC、Amex、Discover) の不透明度を動的に変更しようとしています。

私のコードは IE9、Firefox、Safari、および Chrome で正常に動作しますが、もちろん、Windows XP のサポートに必要な IE8 では動作しません。

私は次のように設定しようとしました：

object.style.filter = 'alpha(opacity=13)';
object.filter = 'alpha(opacity=13)';
object.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(Opacity=13)';

Opacity の O を大文字にしてみましたが、それが役立つとは思っていませんでした...

私が欠けているものを誰かが知っていますか？

JQueryソリューションは問題ありませんが、学術的な理由からJavascriptで可能かどうか知りたいです...

私は次のHTMLを持っています:

<span>
  <input name='cardnumber' value="3717XXXXXXX8775" type='text' id='cardnumber' onkeyup='setCardType();'>
</span>
<span>
  <img src='/style/icon_visa.gif' id='visa' alt='This is a Visa' style='opacity:.13;filter:alpha(opacity=13);'>&nbsp;&nbsp;
  <img src='/style/icon_mastercard.gif' id='mastercard' alt='This is a MasterCard' style='opacity:.13;filter:alpha(opacity=13);'>&nbsp;&nbsp;
  <img src='/style/icon_amex.gif' id='amex' alt='This is an American Express' style='opacity:1;filter:alpha(opacity=100);'>&nbsp;&nbsp;
  <img src='/style/icon_discover.gif' id='discover' alt='This is a Discover Card' style='opacity:.13;filter:alpha(opacity=13);'>
</span>
<input type='hidden' name='cardtype' id='cardtype' value="American Express">

および次の Javascript:

function setCardType() {
var cardnumber = document.getElementById('cardnumber').value;
cardnumber = cardnumber.replace(/[^0-9]/g,'');
document.getElementById('cardnumber').value = cardnumber;

var firstchar = document.getElementById('cardnumber').value.charAt(0);
if (firstchar == 3) {
    if (document.getElementById('visa').style.opacity) {
        document.getElementById('visa').style.opacity = .13;
        document.getElementById('mastercard').style.opacity = .13;
        document.getElementById('amex').style.opacity = 1;
        document.getElementById('discover').style.opacity = .13;
    }
    else {
        document.getElementById('visa').style.filter = 'alpha(opacity=13)';
        document.getElementById('mastercard').style.filter = 'alpha(opacity=13)';
        document.getElementById('amex').style.filter = 'alpha(opacity=100)';
        document.getElementById('discover').style.filter = 'alpha(opacity=13)';
    }
    document.getElementById('confirmCardType').innerHTML = 'American Express';
}
else if (firstchar == 4) {
    if (document.getElementById('visa').style.opacity) {
        document.getElementById('visa').style.opacity = 1;
        document.getElementById('mastercard').style.opacity = .13;
        document.getElementById('amex').style.opacity = .13;
        document.getElementById('discover').style.opacity = .13;
    }
    else {
        document.getElementById('visa').style.filter = 'alpha(opacity=100)';
        document.getElementById('mastercard').style.filter = 'alpha(opacity=13)';
        document.getElementById('amex').style.filter = 'alpha(opacity=13)';
        document.getElementById('discover').style.filter = 'alpha(opacity=13)';
    }
    document.getElementById('confirmCardType').innerHTML = 'Visa';
}
else if (firstchar == 5) {
    if (document.getElementById('visa').style.opacity) {
        document.getElementById('visa').style.opacity = .13;
        document.getElementById('mastercard').style.opacity = 1;
        document.getElementById('amex').style.opacity = .13;
        document.getElementById('discover').style.opacity = .13;
    }
    else {
        document.getElementById('visa').style.filter = 'alpha(opacity=13)';
        document.getElementById('mastercard').style.filter = 'alpha(opacity=100)';
        document.getElementById('amex').style.filter = 'alpha(opacity=13)';
        document.getElementById('discover').style.filter = 'alpha(opacity=13)';
    }
    document.getElementById('confirmCardType').innerHTML = 'MasterCard';
}
else if (firstchar == 6) {
    if (document.getElementById('visa').style.opacity) {
        document.getElementById('visa').style.opacity = .13;
        document.getElementById('mastercard').style.opacity = .13;
        document.getElementById('amex').style.opacity = .13;
        document.getElementById('discover').style.opacity = 1;
    }
    else {
        document.getElementById('visa').style.filter = 'alpha(opacity=13)';
        document.getElementById('mastercard').style.filter = 'alpha(opacity=13)';
        document.getElementById('amex').style.filter = 'alpha(opacity=13)';
        document.getElementById('discover').style.filter = 'alpha(opacity=100)';
    }
    document.getElementById('confirmCardType').innerHTML = 'Discover';
}
else {
    if (document.getElementById('visa').style.opacity) {
        document.getElementById('visa').style.opacity = .13;
        document.getElementById('mastercard').style.opacity = .13;
        document.getElementById('amex').style.opacity = .13;
        document.getElementById('discover').style.opacity = .13;
    }
    else {
        document.getElementById('visa').style.filter = 'alpha(opacity=13)';
        document.getElementById('mastercard').style.filter = 'alpha(opacity=13)';
        document.getElementById('amex').style.filter = 'alpha(opacity=13)';
        document.getElementById('discover').style.filter = 'alpha(opacity=13)';
    }
    document.getElementById('confirmCardType').innerHTML = '';
}
return true;

}

編集:コードを大幅に短縮するjQueryソリューションは次のとおりです。

function setCardType() {
var cardnumber = document.getElementById('cardnumber').value;
cardnumber = cardnumber.replace(/[^0-9]/g,'');
document.getElementById('cardnumber').value = cardnumber;

var firstchar = cardnumber.charAt(0);
if (firstchar == 3) {
    $('#visa').css('opacity', .13);
    $('#mastercard').css('opacity', .13);
    $('#amex').css('opacity', 1);
    $('#discover').css('opacity', .13);
    document.getElementById('confirmCardType').innerHTML = 'American Express';
}
else if (firstchar == 4) {
    $('#visa').css('opacity', 1);
    $('#mastercard').css('opacity', .13);
    $('#amex').css('opacity', .13);
    $('#discover').css('opacity', .13);
    document.getElementById('confirmCardType').innerHTML = 'Visa';
}
else if (firstchar == 5) {
    $('#visa').css('opacity', .13);
    $('#mastercard').css('opacity', 1);
    $('#amex').css('opacity', .13);
    $('#discover').css('opacity', .13);
    document.getElementById('confirmCardType').innerHTML = 'MasterCard';
}
else if (firstchar == 6) {
    $('#visa').css('opacity', .13);
    $('#mastercard').css('opacity', .13);
    $('#amex').css('opacity', .13);
    $('#discover').css('opacity', 1);
    document.getElementById('confirmCardType').innerHTML = 'Discover';
}
else {
    $('#visa').css('opacity', .13);
    $('#mastercard').css('opacity', .13);
    $('#amex').css('opacity', .13);
    $('#discover').css('opacity', .13);
    document.getElementById('confirmCardType').innerHTML = '';
}
return true;

}

4

1 に答える 1

3 
$("#visa").css("opacity", .13);

jQueryは、相互互換性の問題を自動的に処理します。素晴らしいです...

于 2012-04-13T22:29:40.447 に答える