Wenn mehrere Spannen unterschiedliche Werte haben, Anzeige Alarm

Question

Ich habe eine Liste von Produkten (wie ein Einkaufswagen), die von JavaScript/jQuery erstellt wird. In der Liste müssen alle Artikel zu einer Hauptkategorie gehören.

Zum Beispiel können Sie keinen Artikel von INDUSTRIAL-A und INDUSTRIAL-B in derselben Liste haben.

HTML Beispiel:

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

Die <span> mit dem Text, die nicht kopiert werden kann, die Klasse Attribut "Kategorisierung" hat. Wenn jedes Element in der Liste INDUSTRIAL-A hat, gibt es kein alert. Wenn INDUSTRIAL-A und INDUSTRIAL-B vorhanden sind, wird eine alert ausgelöst.

Im Moment habe ich diesen Code, aber es ergibt sich ein alert selbst wenn alle Elemente INDUSTRIAL-A haben:

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

Ich habe auch versucht, diesen Code:

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

Jede Hilfe wäre viel geschätzt. Vielen Dank!

Answer 1

Holen Sie sich alle Texte in span mit ID categori und schieben Sie es auf ein Array! Danach können Sie überprüfen, ob alle Elemente gleich oder nicht wahr oder falsch sind !!!

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

Hoffe, dass hilft!

Answer 2

Ich würde etwas wie dieses folgende Beispiel, wo Sie durch jedes Array-Element durchlaufen und Ihre Listenauswahl einchecken können. Ich hoffe, dass ich Ihnen in die richtige Richtung fahre:

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