0

我正在尝试将相同的数学更改应用于 6 个不同跨度中的 6 个不同数字，它们都共享同一类。使用此 HTML：

<span class="PageText_L483n">$8.00</span>
<span class="PageText_L483n">$9.00</span>
<span class="PageText_L483n">$10.00</span>
<span class="PageText_L483n">$11.00</span>
<span class="PageText_L483n">$12.00</span>
<span class="PageText_L483n">$13.00</span>

我最初有这个JS：

$(function() {
       var price = parseFloat($('.PageText_L483n').text().substr(1));
       var discount = price * 0.2;
       var newPrice = price - discount;
       var newText = '<div>$' + price + '</div> $' + newPrice;
       $('.PageText_L483n').html(newText);
       $('.PageText_L483n div').css("text-decoration", "line-through");

});

但这只会用第一个跨度中的信息替换所有跨度。然后我尝试在这个 JS 中使用数组：

$(function() {

       var prices = [];
       for (var i = 0; i < 6; i++) {
           prices[i] = parseFloat($('.PageText_L483n:nth-of-type(i+1)').text().trim().substr(1));
       }
       for (var j = 0; j < 6; j++) {
            var discount = prices[j] * 0.2;
            var newPrice = prices[j] - discount;
            var newText = '<div>$' + prices[j] + '</div> $' + newPrice;
            $('.PageText_L483n').html(newText);
            $('.PageText_L483n div').css("text-decoration", "line-through");
       }

});

但现在它什么也没做。有人能指出我正确的方向吗？

JSFiddle：http: //jsfiddle.net/vSePd/

4

3 回答 3

2

小提琴

由于您使用的是 jQuery，因此您可以轻松地循环遍历元素本身：

$(function() {

    $('span.PageText_L483n').each(function() {
        var span = $(this);
        var price = parseFloat(span.text().substring(1));
        var discount = price * 0.2;
        var newPrice = price - discount;
        span.html('<div style=text-decoration:line-through>$' + price.toFixed(2) + '</div> $' + newPrice.toFixed(2));
    });

});

如果您出于某种原因不想使用 jQuery：

$(function() {
    var spans = document.querySelectorAll('span.PageText_L483n');

    for ( var i = 0, l = spans.length; i < l; ++i ) {
        var price =  parseFloat(spans[i].textContent.substring(1));
        var discount = price * 0.2;
        var newPrice = price - discount;
        spans[i].innerHTML = '<div style=text-decoration:line-through>$' + price.toFixed(2) + '</div> $' + newPrice.toFixed(2);
    }
});
于 2013-08-05T21:27:54.690 回答
1

正如 kalley 所说明的，.each()当对一组匹配选择器的元素执行操作时，jQuery 将是一个合适的函数。

破坏你的代码的原因$('.PageText_L483n')是它总是选择你所有的spans。因此$('.PageText_L483n').html(newText)，例如，当使用 时，该html()函数将应用于与选择器匹配的所有元素。

使用 时each()，您可以访问$(this)，它基本上指向函数当前循环遍历的所有匹配元素中的一个元素，这允许您在每次运行期间执行单独的操作。

于 2013-08-05T21:32:44.617 回答
0 
$(jquery).each();

看看这个：http: //jsfiddle.net/vSePd/3/

你是这个意思吗？

于 2013-08-05T21:28:41.553 回答