如何從javascript顯示購物卡圖示中的專案數-有解無憂

我有一個來自 FontAwesome 的購物車圖示，我想在其中分配從輸入中選擇的專案的總和。我已經使用 JavaScript 函式添加了專案數量，但我無法設法將此數字顯示到圖示內容中。

圖示的內容值取自value=""CSS 中指定的 HTML 屬性content:attr(value)。

如何將其修改為 JavaScript 變數的值totalQty？

我用document.getElementsByClassName("badge").value = totalQty;了但是沒用。

這是我的代碼：

.badge:after {
  content: attr(value);
  font-size: 12px;
  color: #fff;
  background: red;
  border-radius: 50%;
  padding: 0 5px;
  position: relative;
  left: -8px;
  top: -10px;
  opacity: 0.9;
}

<i class="fa badge fa-lg" id="card-qty" value="">&#xf07a;</i>

uj5u.com熱心網友回復：

您可以通過定位 ID 而不是類來使用 js 來做到這一點，并像這樣進行：

var totalQty = 5;
var elementVar = document.getElementById("card-qty");
elementVar.setAttribute("value", totalQty);

所以它在這里作業。

顯示代碼片段

var totalQty = 5;
var elementVar = document.getElementById("card-qty");
elementVar.setAttribute("value", totalQty);

.badge:after {
  content: attr(value);
  font-size: 12px;
  color: #fff;
  background: red;
  border-radius: 50%;
  padding: 0 5px;
  position: relative;
  left: -8px;
  top: -10px;
  opacity: 0.9;
}

<i class="fa badge fa-lg" id="card-qty" value="">&#xf07a;</i>

編輯：如果您設定為按類而不是 ID 獲取元素，則可以使用此 js 代碼：

var totalQty = 5;
const elementVar = document.getElementsByClassName("badge");
let index = 0;


while (index < elementVar.length) {
  elementVar[index].setAttribute("value", totalQty);
  index  
}

它在這里作業：

var totalQty = 5;
const elementVar = document.getElementsByClassName("badge");
let index = 0;


while (index < elementVar.length) {
  elementVar[index].setAttribute("value", totalQty);
  index  
}

.badge:after {
  content: attr(value);
  font-size: 12px;
  color: #fff;
  background: red;
  border-radius: 50%;
  padding: 0 5px;
  position: relative;
  left: -8px;
  top: -10px;
  opacity: 0.9;
}

<i class="fa badge fa-lg" id="card-qty" value="">&#xf07a;</i>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/534331.html

標籤：javascript网页格式CSS图标

上一篇：創建實體時設定方法

下一篇：一個回傳新陣列的函式，這個陣列的值不能重復超過n次