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>具有class属性＆＃34; categori＆＃34;。如果列表中的每个项目都有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);
    });
});

非常感谢任何帮助。谢谢！

Answer 1

使用id categori获取span中的所有文本并将其推送到数组！之后，您可以检查所有元素是否相同或不返回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;
    }
}

希望有所帮助！

Answer 2

我想在下面的示例中，您可以遍历每个数组项并检入列表选择器。我希望我能把你推向正确的方向：

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: