[英]Why my position(right) property does not change in JavaScript
根据我的代码，如果 (cartNum < 10) 我想改变我的元素的位置(.counter-eclipse-num) 但它不会改变！ 我只是想让它移动一点。
但是如果 (cartNum > 10) 在 addCartNum() 函数中，它会改变！ 问题出在哪儿 ？
我已经添加了我的 HTML 和 JavaScript 代码，你可以看看。
let cartNumStr = document.querySelector('.counter-eclipse-num').innerText; let cartNum = Number(cartNumStr); document.querySelector(".polygon-cart").addEventListener("click", function(e) { const tgt = e.target; if (tgt.classList.contains("fa-trash")) { const container = tgt.closest(".cart-content-container"); let qty = container.querySelector(".cart-qty").value; if (qty < 2){ container.remove(); cartNum = cartNum - 1; document.querySelector('.counter-eclipse-num').innerText = cartNum; } else { qty = qty -1; container.querySelector(".cart-qty").value = qty; cartNum = cartNum - 1; document.querySelector('.counter-eclipse-num').innerText = cartNum; if (cartNum <10) { document.querySelector('.counter-eclipse-num').style.right = "5.2px"; } } } }); function addCartNum() { cartNum = cartNum + 1; document.querySelector('.counter-eclipse-num').innerText = cartNum; if (cartNum > 9){ document.querySelector('.counter-eclipse-num').style.right = "2.2px"; } }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="Header.CSS"> <link rel="stylesheet" href="Style.CSS"> <link rel="stylesheet" href="Footer.CSS"> <script src="https://kit.fontawesome.com/38b3678073.js" crossorigin="anonymous"></script> <script src="/JS/main.js" async></script> <title>خانه | PCGA</title> </head> <body> <header> <div class="polygon-cart" id = "cart"> <i class="fas fa-shopping-cart" id="cart-icon"></i> <div class="counter-eclipse"> <p class="counter-eclipse-num">0</p> </div> <div class="main-cart-content-container" id = "main-cart-content-container"> </div> <div class="cart-info-top"> <button class="cart-checkout-btn">تسویه نهایی</button> <span class="cart-whole-price">جمع مبلغ سبد خرید شما : <span class = "sum-price">0</span> هزارتومان</span> </div> </div> <img src="img/Final-Logo.png" alt="Final-Logo" class="Final-Logo" height="171px" width="500px"> <div class="SearchContainer"> <table class="SearchTable"> <tr> <td> <input type="text" placeholder="Search" class="SearchBar"> </td> <td> <a href="#"><i class="SearchIcon"></i></a> </td> </tr> </table> </div> <nav class="nav-top"> <ul> <a href="/index.html"><li>خانه</li></a> <div class="nav-products"> <a href="#"><li>محصولات</li></a> <ul class = products-dropdown-content> <a href="/Products-Origin.html"><li>(Origin) اوریجین</li></a> <a href="/Products-Steam.html"><li>(Steam) استیم</li></a> <a href="/Products-Uplay.html"><li>(Uplay) یوپلی</li></a> </ul> </div> <a href="#"><li>تماس با ما</li></a> <a href="#"><li>درباره ما</li></a> </ul> </nav> </header> <div class = 'products-container'> <div class='product-1'> <div class="product-img-container"> <img src="/img/BFV.jpg" class='product-img'> <div class = 'product-price'>قیمت : <span class="real-price">150</span> هزار تومان</div> </div> <section class='product-title'> <h1 dir="rtl"><a href="#">اکانت بازی Battlefield V Deluxe Edition</a></h1> </section> <div class="product-des"> <table class="info-table"> <tr> <th>ضمانت</th> <th>قابلیت تغییر اطلاعات</th> <th>پلتفرم</th> </tr> <tr> <td>5 ساله سبز</td> <td>دارد</td> <td>یوپلی</td> </tr> </table> <button class="buy-btn" ><i class="fas fa-shopping-cart" id= "addcartbtn"></i></button> </div> </div> <div class='product-1'> <div class="product-img-container"> <img src="/img/BFV.jpg" class='product-img'> <div class = 'product-price'>قیمت : <span class="real-price">520</span> هزار تومان</div> </div> <section class='product-title'> <h1 dir="rtl"><a href="#">اکانت بازی Battlefield V Deluxe Edition</a></h1> </section> <div class="product-des"> <table class="info-table"> <tr> <th>ضمانت</th> <th>قابلیت تغییر اطلاعات</th> <th>پلتفرم</th> </tr> <tr> <td>5 ساله سبز</td> <td>دارد</td> <td>یوپلی</td> </tr> </table> <button class="buy-btn" ><i class="fas fa-shopping-cart" id= "addcartbtn"></i></button> </div> </div> <div class='product-1'> <div class="product-img-container"> <img src="/img/BFV.jpg" class='product-img'> <div class = 'product-price'>قیمت : <span class="real-price">750</span> هزار تومان</div> </div> </body> </html>
这是请求的 CSS 代码：
.counter-eclipse{ position: absolute; width: 18px; height: 18px; right: 7px; top: -78px; background: #DAD8C7; border-radius: 100%; transition: .3s; } .counter-eclipse-num{ position: absolute; right: 5px; top: -12px; font-family: 'Roboto'; font-style: normal; font-weight: normal; font-size: 15px; line-height: 14px; color: #FF0000; transition: .3s; }
如果在某些条件下元素移动，则定位看起来确实有效。 您是否检查过此(cartNum < 10)条件是否为真？ 首先，我建议在其中放置一个调试器或console.log()并在 Dev Tools 中检查您的控制台，以了解 cartNum 是否小于 10。
如果是，并且定位仍然不起作用，请检查应用于您尝试移动的元素的 CSS。 确保right属性在那里，具有正确的值并且没有被其他东西重叠。
希望能帮助到你！ 无论如何，如果您有更多信息，请告诉我们。 您可以尝试分享开发工具的 Elements 选项卡的屏幕截图，以便我们查看您是否有任何样式问题。
好的，我回答了我自己的问题！ 我唯一需要做的就是在下面的代码中将 if 条件添加到我的第一个 if 中（注意我的旧代码和新代码）：
新代码：
document.querySelector(".polygon-cart").addEventListener("click", function(e) { const tgt = e.target; if (tgt.classList.contains("fa-trash")) { const container = tgt.closest(".cart-content-container"); let qty = container.querySelector(".cart-qty").value; if (qty < 2){ container.remove(); cartNum = cartNum - 1; document.querySelector('.counter-eclipse-num').innerText = cartNum; cartRealPrice = container.querySelector('.cart-real-price').innerText; sumPrice = sumPrice - cartRealPrice; document.querySelector('.sum-price').innerText = sumPrice; if (cartNum < 10) { document.querySelector('.counter-eclipse-num').style.right = "5.2px"; } } else { qty = qty -1; container.querySelector(".cart-qty").value = qty; cartNum = cartNum - 1; container.querySelector('.counter-eclipse-num').innerText = cartNum; if (cartNum < 10) { document.querySelector('.counter-eclipse-num').style.right = "5.2px"; } } } });
旧代码：
document.querySelector(".polygon-cart").addEventListener("click", function(e) { const tgt = e.target; if (tgt.classList.contains("fa-trash")) { const container = tgt.closest(".cart-content-container"); let qty = container.querySelector(".cart-qty").value; if (qty < 2){ container.remove(); cartNum = cartNum - 1; document.querySelector('.counter-eclipse-num').innerText = cartNum; } else { qty = qty -1; container.querySelector(".cart-qty").value = qty; cartNum = cartNum - 1; document.querySelector('.counter-eclipse-num').innerText = cartNum; if (cartNum <10) { document.querySelector('.counter-eclipse-num').style.right = "5.2px"; } } } });
为什么我的 JavaScript 设置器没有按预期更改 object 属性？
[英]Why does my JavaScript setter not change object property as expected?
为什么我的 JavaScript function 可以正常工作，但之后立即显示“未定义”？
[英]Why does my JavaScript function work but displays "undefined" right after?
为什么我的JavaScript代码在此json数据上读取null属性？
[英]why does my javascript code read a property of null on this json data?
为什么 position:static CSS 属性会缩进段落的第一行？
[英]Why does the position:static CSS property indent the first line of my paragraph?
禁用鼠标右键单击并且不更改JavaScript中的光标位置
[英]Disable mouse right click and don't change cursor position In Javascript
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.