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 的改造，它可以满足您的要求 - 我没有对其进行广泛的改造，只是足以提供一个工作示例（我将使用最新/最佳实践/模块化代码作为 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 中运行良好，但对于旧版本，里程会有所不同。

原始脚本中有几个错误：

一般有几点：

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

我不知道为什么必须在没有 jQuery 的情况下完成此操作，因为它消除了尝试执行此类操作时的许多跨浏览器问题，并且可以很容易地应用可见性/样式更改并为其设置动画。
但是，如果您需要从头开始编写所有内容，那么如果您为可见/隐藏状态创建 CSS 类并使用使用JavaScript 更改元素的类中详述的技术应用它们，将会更好、更灵活——那样你就不用不必在每次想要更改样式时都更改 JS 代码。

祝你好运！

于 2013-02-14T12:36:17.370 回答