Question

我希望有人可以提供帮助

基本上我正在寻找一种方法来创建用户购物篮中有多少项的弹出通知。

当用户在篮子中添加一个项目时，篮子图标旁边会出现一个带有项目数量的红色圆圈，当篮子中的项目数等于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可以做到这一点吗？

Answer 1

好的，所以这里是你的JSFiddle的改造，做你想做的事情 - 我没有广泛地重做它，只是提供一个工作的例子（我留下使用最新/最佳实践/模块化代码作为OP的练习！）：

<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中运行良好，但旧版本的里程会有所不同。

原始脚本中的一些错误：

querySelector选择CSS classname而不选择元素ID - 使用getElementById for IDs
innerText是IE特定的，而innerHTML在这里可以安全使用 - 请参阅'innerText' works in IE, but not in Firefox

以及一般性的几点：

从你的JSFiddle看起来你想要显示/隐藏红色圆圈的动画。我一直坚持使用scale方法，但请注意，CSS转换支持哪些CSS属性取决于浏览器。

我不知道为什么在没有jQuery的情况下必须这样做，因为它在尝试执行此类操作时消除了许多跨浏览器问题，并且可以非常轻松地应用可见性/样式更改和动画它们。
但是，如果你需要从头开始编写它，那么如果你为可见/隐藏状态创建CSS类并使用Change an element's class with JavaScript中详细介绍的技术应用它们，它会更好，更灵活 - 这样你就不会每次要更改样式时都要不断更改JS代码。

祝你好运！

篮子弹出中的项目数

1 个答案:

但是，这不是完全跨浏览器兼容的。