Question

我试图根据其中包含的内容来操纵跨度。在我公司的电子商务网站上，有两个跨度，包含商品的价格和商品的销售价格。并非所有商品都有促销价。问题是原始价格跨度显示为文本 - 装饰设置为行 - 但无论是否有销售价格。因为我无法与包含产品信息的数据库进行交互（平台不允许）我必须使用javascript来纠正这个问题。如果没有销售价格，我需要隐藏包含销售价格的跨度，并删除包含原始价格的另一个跨度的文本装饰。目前我的代码（下面）将隐藏销售范围，但我只能删除所有或没有列表价格跨度的文本修饰。有什么想法吗？

$(function(){
    $(".container > .special").each(function(){
        var specialContents = $(this).text();
        var isEmpty = specialContents.substr(0, 7);

        if(isEmpty != "Sale: $"){
            $(this).hide();
        }

    });
});

每个跨度都包含在带有类容器的div中，跨度具有原始或定价的类“列表”和销售价格的“特殊”。此外，每个特殊跨度的前6个字符将无论是否有价格，都是“销售：”。提前致谢

Answer 1

您的问题是$(this)引用了所有.special元素。在执行$.each时，您应该有两个参数 - 一个用于索引，一个用于当前项。这将允许您引用单个项目。

$(".container > .special").each(function(i,item){
        var $item = item,
            specialContents = $item.text(),
            isEmpty = specialContents.substr(0, 7);

        if(isEmpty != "Sale: $"){
            $item.hide().attr('id', 'hidden');
        }

    });

此外，您可能会为多个元素设置id为hidden这不是一个好主意（ID应该始终是唯一的）。您还可以将hide()和attr()方法链接在一起以保存选择器。我还设置了$item来保存另一个jQuery选择器。

如果您要更改CSS，那么您可以使用css() method代替$item.hide()来执行以下操作：

$item.css('text-decoration','none');

例如，如果您想要使用list类更改同级范围，则可以执行以下操作：

$item.siblings('.list').css('text-decoration','none');

Answer 2

鉴于此HTML

<div class="container">
    <span class="list">List Price: $xx.xx</span>
    <span class="special">Sale: $xx.xx</span></div>
<div class="container">
    <span class="list">List Price: $xx.xx</span>
    <span class="special">Empty</span>
</div>
<div class="container">
    <span class="list">List Price: $xx.xx</span>
    <span class="special">Sale: $xx.xx</span>
</div>

your code should work。这里删除了line-through：

$(".container > .special").each(function() {
    var specialContents = $(this).text();
    var isEmpty = specialContents.substr(0, 7);

    if (isEmpty != "Sale: $") {
        $(this).hide();
        $(this).prev().css('text-decoration', 'none');
    }
});

当然，如果您的HTML与此不同，那么它将无效。

使用javascript在多个跨度上操纵css

2 个答案: