複数のスパンの値が異なる場合は、アラートを表示

Question

JavaScript/jQueryによって作成されたショッピングカートのような商品のリストがあります。リストでは、すべての項目が1つのメインカテゴリに属している必要があります。

たとえば、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> 

クラス属性 "categori" を持って複製することはできませんテキストを<span>。リストのすべての項目に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がカテゴリのすべてのテキストを取得し、配列にプッシュしてください！ それに続いて、すべての要素が同じかどうか、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

次の例のように、各配列項目を繰り返し処理し、リストセレクタをチェックインできます。私は正しい方向にあなたを運転してい願っています：

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