[英]How to access a CSS class in javascript?
我正在嘗試訪問一個 javascript 文件中的兩個 HTML 文件類。 addToCartClicked(event) function is used to access index.html classes and addItemToCart() is used to access cart.html classes but addItemToCart() function does not access the .cart-items class and gives me null message. 雖然不是空的。 您可以在cart.html中看到它。
我還有另一個 function 也用於購物車。html來計算產品的總價格，當我使用cart-items class 時，它工作正常並打印結果
此 function 選擇索引。html 類
function addToCartClicked(event) {
var button = event.target;
var shopItem = button.parentElement.parentElement.parentElement.parentElement
var title = shopItem.querySelector(".name-of-product").innerText
var price = shopItem.querySelector(".product-price").innerText
var image = shopItem.querySelector(".hover-img").src
addItemToCart();
}
此 function 選擇購物車。html class
function addItemToCart() {
var cartItems = document.querySelector(".cart-items")
console.log(cartItems);
}
購物車.html
<tbody class="cart-items">
<tr class="cart-row">
<td class="image" data-title="No"><img src="../../static/images/32.jpg" alt="#"></td>
<td class="product-des" data-title="Description">
<p class="product-name"><a href="#">Women Dress</a></p>
<p class="product-des">Maboriosam in a tonto nesciung eget distingy magndapibus.</p>
</td>
<td class="price" data-title="Price"><span>$200.00</span></td>
<td class="qty" data-title="Qty"><!-- Input Order -->
<div class="input-group">
<div class="button minus">
<button type="button" class="btn btn-primary btn-number" disabled="disabled" data-type="minus" data-field="quant[2]">
<i class="ti-minus"></i>
</button>
</div>
<input type="text" name="quant[2]" class="input-number" data-min="1" data-max="100" value="2">
<div class="button plus">
<button type="button" class="btn btn-primary btn-number" data-type="plus" data-field="quant[2]">
<i class="ti-plus"></i>
</button>
</div>
</div>
<!--/ End Input Order -->
</td>
<td class="total-amount" data-title="Total"><span>$200.00</span></td>
<td class="action" data-title="Remove"><a><i class="ti-trash remove-icon"></i></a></td>
</tr>
</tbody>
HTML 的變化
我認為您忘記添加 table 標簽。 我添加了表格標簽，它給出了結果
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<table>
<tbody class="cart-items">
<tr class="cart-row">
<td class="image" data-title="No"><img src="../../static/images/32.jpg" alt="#"></td>
<td class="product-des" data-title="Description">
<p class="product-name"><a href="#">Women Dress</a></p>
<p class="product-des">Maboriosam in a tonto nesciung eget distingy magndapibus.</p>
</td>
<td class="price" data-title="Price"><span>$200.00</span></td>
<td class="qty" data-title="Qty">
<!-- Input Order -->
<div class="input-group">
<div class="button minus">
<button type="button" class="btn btn-primary btn-number" disabled="disabled" data-type="minus"
data-field="quant[2]">
<i class="ti-minus"></i>
</button>
</div>
<input type="text" name="quant[2]" class="input-number" data-min="1" data-max="100" value="2">
<div class="button plus">
<button type="button" class="btn btn-primary btn-number" data-type="plus"
data-field="quant[2]">
<i class="ti-plus"></i>
sdfdsf
</button>
</div>
</div>
<!--/ End Input Order -->
</td>
<td class="total-amount" data-title="Total"><span>$200.00</span></td>
<td class="action" data-title="Remove"><a><i class="ti-trash remove-icon"></i></a></td>
</tr>
</tbody>
</table>
</body>
</html>
<script>
var cartItems = document.querySelector(".cart-items")
console.log(cartItems);
</script>
如果您在兩個 html 文件（index.html，cart.html）中導入 JavaScript 文件，您將訪問這些函數。
然后你可以 select 你的標簽：
function addItemToCart() {
var cartItems = document.getElementsByClassName("cart-items")
console.log(cartItems);
}
function addItemToCart() { var cartItems = document.querySelector("table.cart-items"); console.log(cartItems); }
您必須創建 one.js 文件並將所有 JavaScript 代碼放在此文件中，然后將此文件加載到 index.html 和 cart.html 中。
如何從javascript訪問css類中定義的css變量？
[英]How to access css variable defined within css class from javascript?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.