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

【问题标题】：If multiple spans have different values, display alert如果多个跨度具有不同的值，则显示警报
【发布时间】：2017-03-02 03:25:05
【问题描述】：

我有一个由 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);
    });
});

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

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

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

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

希望有帮助！

【讨论】：

【解决方案2】：

我想要类似下面的示例，您可以在其中遍历每个数组项并签入列表选择器。我希望我能引导你朝着正确的方向前进：

$(function() {
  var array = ['INDUSTRIAL-A', 'INDUSTRIAL-B'];

  array.forEach(function(t) {
    $("span.categori:contains(" + t + ")").each(function() {
      setTimeout(function() {
        alert('You have items from different category grades.');
      }, 1);
    });
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="categori">INDUSTRIAL-A</span>
<span class="categori">INDUSTRIAL-C</span>

【讨论】：