Question

我在这里有一些代码，我一直在努力使css类动态更改。当我使用此代码加载页面时，它只是将类保持为“购物车”。每当跨度计算器计数时＃39;大于0.我不确定某些东西是否加载不正确。

http://store.revivesalonsf.com

这是我一直在努力做同样事情的JSFiddle示例。有关如何使这项工作的任何想法？任何指导都会受到赞赏，因为我正在慢慢地学习js。

＆＃13;

$(document).ready(function() {
  $("span").each(function() {
    if (parseInt($(this).text()) > 0) {
      $(this).parent().find('a').removeClass("cart");
      $(this).parent().find('a').addClass("cart-full");
    }
  });
});

＆＃13;

.cart-full {
  border: 2px solid red
}

.cartContainer {
  padding-top: 5px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="cart-summary">
  <div class="cartContainer">
    <span class="cart-summary__count" data-v-observable="cart-count">0</span>
    <a href class="cart">example.com</a>
  </div>
  <div class="cartContainer">
    <span class="cart-summary__count" data-v-observable="cart-count">1</span>
    <a href class="cart">example1.com</a>
  </div>
</div>

＆＃13;

Answer 1

如果要在SPAN元素中的项目数增加时更改类，则必须更改js的addtocart脚本以及那里的事件。通过添加每秒检查值的间隔并根据它更新类，有一种快速替代方法可以执行您想要的操作。如果您知道如何管理添加到购物车脚本，我建议不要使用第二种方法！试试这个，它会工作。例如：

>>> from itertools import product
>>> dictElement = {"PA":2,"PB":2,"PC":3}
>>> combinations = product(*(['{0}{1}'.format(v, i) for i in range(dictElement[v])]
...                           for v in sorted(dictElement, reverse=True)))
>>> for combo in combinations:
...     print(combo)
...
('PC0', 'PB0', 'PA0')
('PC0', 'PB0', 'PA1')
('PC0', 'PB1', 'PA0')
('PC0', 'PB1', 'PA1')
('PC1', 'PB0', 'PA0')
('PC1', 'PB0', 'PA1')
('PC1', 'PB1', 'PA0')
('PC1', 'PB1', 'PA1')
('PC2', 'PB0', 'PA0')
('PC2', 'PB0', 'PA1')
('PC2', 'PB1', 'PA0')
('PC2', 'PB1', 'PA1')

Answer 2

您的代码是正确的。问题在于，当DOM已经呈现时，将检索产品数量。

可能的解决方案是在脚本更新可见数量的产品时更改元素的类。您对itemCount文件中的函数volusion.js感兴趣：

function itemCount(count) {
    if (count === undefined) {
        return currentCartCount;
    } else {
        currentCartCount = count;

        if(currentCartCount > 0) {
            // change style of the cart to full
        } else {
            // change style of the  cart to empty
        }

        $("[data-v-observable='cart-count']").text(count);
        return count;
    }
}

如果您无法访问所有文件，则可以使用DOMSubtreeModified事件：

$jQueryModern(document).ready(function() {
    $jQueryModern("#cart-summary").on('DOMSubtreeModified', "span", function() {
      if (parseInt($jQueryModern(this).text()) > 0) {
        $jQueryModern(this).parent().find('a').removeClass("cart");
        $jQueryModern(this).parent().find('a').addClass("cart-full");
      } else {
        $jQueryModern(this).parent().find('a').removeClass("cart-full");
        $jQueryModern(this).parent().find('a').addClass("cart");
      }
    });
});

＆＃13;

$("#cart-summary").on('DOMSubtreeModified', "span", function() {
  if (parseInt($(this).text()) > 0) {
    $(this).parent().find('a').removeClass("cart");
    $(this).parent().find('a').addClass("cart-full");
  } else {
  	$(this).parent().find('a').removeClass("cart-full");
    $(this).parent().find('a').addClass("cart");
  }
});

$('#add').click(function() {
  var newValue = parseInt($("[data-v-observable='cart-count']").text(), 10) + 1;
  $("[data-v-observable='cart-count']").text(newValue);
});

$('#remove').click(function() {
  var newValue = parseInt($("[data-v-observable='cart-count']").text(), 10) - 1;
  if (newValue === -1) newValue = 0;
  $("[data-v-observable='cart-count']").text(newValue);
});

＆＃13;

.cart-full {
  border: 2px solid red
}

.cartContainer {
  padding-top: 5px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="cart-summary">
  <div class="cartContainer">
    <span class="cart-summary__count" data-v-observable="cart-count">0</span>
    <a href class="cart">example.com</a>
  </div>
</div>

<button id="add">Add item</button>
<button id="remove">Remove item</button>

＆＃13;

在加载值

2 个答案: