javascript - 如果多个跨度具有不同的值，则显示警报

我有一个由 JavaScript/jQuery 创建的产品列表(如购物车)。在列表中，所有项目都必须属于一个主要类别。

例如，同一列表中不能有来自 INDUSTRIAL-A 和 INDUSTRIAL-B 的项目。

HTML 示例:

<div id="{{divId}}" class="cart__row wishl-row" data-item="{{itemId}}" data-tags="{{product.tags}}">
    <div class="grid--full cart__row--table-large">
        <div class="grid__item large--three-fifths">
            <div class="grid">
                <div class="grid__item one-third">
                    <a href="{{product.url}}?variant={{variant.id}}" title="{{product.title}}" class="cart__image">
                        <img src="{{featuredImage}}" alt="{{product.title}}" />
                    </a>
                </div>
                <div class="grid__item two-thirds">
                    <a href="{{product.url}}?variant={{variant.id}}" title="{{product.title}}" class="h4 cart__product-name">{{{product.title}}}</a>
                    <ul>
                        <li>
                            <span class="variant-option-key">{{this.name}}:</span> {{this.value}}
                        </li>
                    </ul>
                    <span class="variant-title">{{variantTitle}}</span>
                    <ul>
                        <li>
                            <span class="property-key">{{@key}}:</span> {{this}}
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="grid__item large--two-fifths">
            <div class="grid--full cart__row--table">
                <div class="grid__item two-thirds text-center">
                    <p class="h4 cart__product-name">
                        <span class="categori" style="font-weight: 600;">{{ product.tags }}</span>
                        <br />
                        <span class="category">{{ product.tags }}</span>
                    </p>
                </div>
                <div class="grid__item one-third text-right wishl-item-actions">
                    <a href="#" class="wishl-del" data-item="{{itemId}}" data-item-title="{{product.title}}">{{deleteLabel}}</a>
                </div>
            </div>
        </div>
    </div>
</div>

带有不可复制文本的 <span> 具有类属性“categori”。如果列表中的每个项目都有 INDUSTRIAL-A，则没有 alert 。如果存在 INDUSTRIAL-A 和 INDUSTRIAL-B，则触发 alert。

现在我有这个代码，但即使所有项目都有 INDUSTRIAL-A，它也会产生一个 alert:

var array = ["INDUSTRIAL-A", "INDUSTRIAL-B"];

$(array).ready(function () {

    // Using :contains()
    $("span.categori:contains(" + this + ")").ready(function() {
        setTimeout(function() {
            alert("You have items from different category grades.");
        }, 1);
    });
});

我也试过这个代码:

var array = ["INDUSTRIAL-A", "INDUSTRIAL-B"];

$(array).ready(function () {

    // Using :filter()
    $("span.categori:filter(" + this + ")").ready(function() {
        setTimeout(function() {
            alert("You have items from different category grades.");
        }, 1);
    });
});

任何帮助将非常感激。谢谢!

最佳答案

获取带有 id 类别的 span 中的所有文本并将其推送到数组中!
之后您可以检查所有元素是否相同或不返回真或假!!!

function checkForSameIndustry(){
    var span_text_array = [];
    $("span[id=categori]").each(function(index, elem){
        span_text_array.push($(this).text());
    });
    if(span_text_array.length > 0){
        return (!!span_text_array.reduce(function(a, b){ return (a === b) ? a : NaN; }));
    }else{
        return true;
    }
}

希望有帮助!

关于javascript - 如果多个跨度具有不同的值，则显示警报，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42546263/