javascript - each() 函数返回 Null 或对象

Question

您好，我是编程新手，我正在尝试学习并使其与 each() 一起工作。忍受我。我尽力向这里和你学习。

1. 我正在尝试以特定价格浏览目录中每个产品的元素:页面上的原始价格和销售价格。
2. 然后计算折扣百分比
3. 打印折扣 %
4. 勾选以比较背景颜色的百分比:棕色、黄色和红色。

现在，我测试每一行，看看它是否有效。 salecost = $(this).find('#sale').html(); 在显示带有美元符号的金额之前返回一些空值。怪人想不通。 Replace() 无法正常工作 - 无法正常工作。它应该删除美元符号。

此外，我不确定它与 compare 的关系如何——我是否正确地编写了语句？

提前感谢您的帮助

var salecost;
var originalcost;
var percentDiscount;
var percent; 

function calculate(sale, original)
 {
  percentDiscount = eval((sale/original)*100);
        document.getElementById("percentoff").innerHTML=parseInt(percentDiscount) + '%';       
 }

$(document).ready(function(index){

           $('.item').each(function(){     
            salecost = $(this).find('#sale').html();
            salecost = salecost.replace(/[^\d\.]/g,"");
            alert (salecost);
             originalcost = $('#sale').html();
             originalcost = originalcost.replace(/[^\d\.]/g,"");
             alert (originalcost);
             percent = calculate(salecost,originalcost);
             alert(percent);

               if(percent<30)
               {
                       $("div#percentoff").css({"background-color":"brown", "padding":"5px 0"});
               }

               if(percent<50){
                       $("div#percentoff").css({"background-color":"yellow", "padding":"5px 0"});
               }

               if(percent<70){
                       $("div#percentoff").css({"background-color":"red", "padding":"5px 0"});
               }
       });
});

Answer 1

这不是必需的

$(this).find('#sale').html();

您可以使用

替换它

$("#sale").html();

因为 id 在文档中是唯一的。如果您有多个具有相同 ID 的元素，则您的 HTML 无效。

编辑

从 span 标签中删除 id。

<span class="price">S$319</span>

这将在父 div 中找到所有具有类名 price 的 span[这里只有 1]。这里不用.html()，可以用.text()

$(this).find('span.price').text();