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

Question

我有一个由 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被触发。

现在我有这段代码，但它会产生一个 alert即使所有元素都具有 INDUSTRIAL-A:

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);
    });
});

任何帮助将不胜感激。谢谢!

Answer 1

获取 span 中具有 id categori 的所有文本并将其推送到一个数组中!接下来，您可以检查所有元素是否相同或不返回 true 或 false!!!

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;
    }
}

希望对您有所帮助!