0

誰かが助けてくれることを願っています

基本的に、ユーザーの買い物かごに何個のアイテムがあるかを示すポップアップ通知を作成する方法を探しています。

ユーザーがバスケットにアイテムを追加すると、バスケットアイコンの横にアイテム数の赤い円が表示され、バスケット内のアイテム数が0になると、赤い円が消えます。

これは私が書き込もうとしているJavaScriptコーディングです。

if(document.querySelector('#no_items').innerText === '0'){
document.querySelector(".circle").style.display = 'none';

} else {
document.querySelector(".circle").style.display= 'inline';

}

http://jsfiddle.net/h2bwa/

基本的に、基本が空の場合、ポップアップは消えますが、アイテムが追加されると表示されます。

これはJQueryなしで行うことができますか？

4

1 に答える 1

0

わかりましたので、ここであなたが望むことをするあなたの JSFiddle の再加工があります - 私はそれを広範囲に再加工していません.実際の例を提供するのに十分です.

<style>
.circle {
    width:20px;
    height:20px;
    border-radius:50px;
    font-size:12px;
    color:#fff;
    font-weight:bold;
    line-height:20px;
    text-align:center;
    background:#be1417;
    position: absolute;
    top: 30px;
    left: 17px;
    -moz-transition: all 1s;     /* Firefox 4 */
    -webkit-transition: all 1s;  /* Safari and Chrome */
    -o-transition: all 1s;       /* Opera */
    -ms-transition: all 1s;      /* IE10+ */
    transition: all 1s;          /* W3C */
}
</style>
<script>
    function checkValue() {
        if (document.getElementById("no_items").innerHTML === '0') {
            document.querySelector(".circle").style.MozTransform = "scale(0)";
            document.querySelector(".circle").style.WebkitTransform = "scale(0)";
            document.querySelector(".circle").style.OTransform = "scale(0)";
            document.querySelector(".circle").style.msTransform = "scale(0)";
        } else {
            document.querySelector(".circle").style.MozTransform = "scale(1)";
            document.querySelector(".circle").style.WebkitTransform = "scale(1)";
            document.querySelector(".circle").style.OTransform = "scale(1)";
            document.querySelector(".circle").style.msTransform = "scale(1)";
        }
    }

    function incrementValue() {
        var value = parseInt(document.getElementById('no_items').innerHTML, 10);
        value = isNaN(value) ? 0 : value;
        value++;
        document.getElementById('no_items').innerHTML = value;
        checkValue();
    }

    function decrementValue() {
        var value = parseInt(document.getElementById('no_items').innerHTML, 10);
        value = isNaN(value) ? 0 : value;
        (value >= 1) && value--;
        document.getElementById('no_items').innerHTML = value;
        checkValue();
    }
</script>
<div id="circle" class="circle">
    <div id="no_items" style="color:white">1</div>
</div>
<input type="button" onclick="incrementValue()" value="Buy Item" />
<input type="button" onclick="decrementValue()" value="Remove Item" />

ただし、これはクロスブラウザーと完全に互換性があるわけではありません。

最新の Firefox、Opera、Chrome、IE では問題なく動作しますが、古いバージョンでは距離が異なります。

元のスクリプトのいくつかのエラー:

一般的ないくつかのポイント：

JSFiddle から、赤い円の表示/非表示をアニメーション化したいようです。私はあなたの scale メソッドに固執しましたが、CSS トランジションでサポートされている CSS プロパティについてはブラウザーに依存する可能性があることに注意してください。

なぜこれを jQuery なしで行う必要があるのか​​ わかりません.jQuery を使用すると、この種のことをしようとする際のクロスブラウザーの問題の多くが解消され、可視性/スタイルの変更を適用してアニメーション化することが非常に簡単になります。
ただし、すべてをゼロから作成する必要がある場合は、表示/非表示の状態の CSS クラスを作成し、JavaScript で要素のクラスを変更するで説明されている手法を使用してそれらを適用すると、より柔軟で優れたものになります。スタイルを変更するたびに JS コードを変更する必要はありません。

幸運を！

于 2013-02-14T12:36:17.370 に答える