So fügen Sie Multi-Werte in das Daten-Tag ein

Question

Ich habe eine jquery-Filterfunktion erstellt, die die Ergebnisse nach Daten-Tags filtert. wie folgt:

<div class="resultblock" data-tag="ios"> 
     <img src="images/osx.jpg" class="itemimg">    
     <div class="desc"> 
      <div class="desc_text"> 
       lorem ipsum 
      </div> 
     </div> 

Ich möchte nur in das Daten-Tag eine weitere Tags einfügen, um zu filtern. wie folgt:

data-tag="ios,android,windows" 

Wie kann ich das tun?

Answer 1

Ich bin mir nicht sicher, ob ich die Frage, die Sie stellen, vollständig verstehe, aber ich denke, Sie könnten dies über JS erreichen.

In Ihrem HTML fügen Sie ein script Tag hinzu und dann schreiben Sie einfach ein JS, um HTML-Tags zu bearbeiten oder hinzuzufügen. Hier ein Beispiel:

<script> 
var para = document.createElement("p"); 
var node = document.createTextNode("This is new."); 
para.appendChild(node); 
var element = document.getElementById("div1"); 
element.appendChild(para); 
</script> 

nun die Daten-Tag zu sortieren:
nur diesen Code in Ihre HTML-Datei hinzuzufügen.

<div id="div1"> 
</div> 

<script> 
var tag ="ios,android,windows"; //initialize variable 
var data = tag.split(","); //this makes an array of ios,andrid,windows 
var i = 0; 

while (i < 3){ 
    alert(i); 
    var para = document.createElement("p"); 
    var node = document.createTextNode(data[i]); 
    para.appendChild(node); 
    var element = document.getElementById("div1"); 
    element.appendChild(para); 
    i++; 
} 
</script> 

Answer 2

Der beste Weg dies zu tun ist, Klassen zu verwenden. Das Hinzufügen und Entfernen von Klassen ist viel einfacher als bei anderen Attributen. Die Klassen sollten sich nicht mit anderen Klassen überlappen, die beispielsweise für CSS verwendet werden. Ein Präfix hinzuzufügen ist noch besser. Wie folgt aus:

$(".filter-ios").hide(); // hide all ios elements 

$("something").addClass("filter-windows"); // add the class windows to an element 

$(".filter-ios").addClass("filter-apple"): // add the apple filter class to the ios filter class elements 

$("something").hasClass("filter-samsung"); // check if an element has the filter class samsung 
// ... 

Die Klassen .filter-* sollte nur zum Filtern verwendet werden, müssen sie haben keine CSS mit ihnen verbunden, wenn bereits Klassen so, dann nur das Präfix sonst filter etwas ändern!

Answer 3

Ich habe gerade ein kleines Objekt mit zwei Methoden .add und .remove erstellt. Es funktioniert wie classList DOM-Methode zum Hinzufügen und Entfernen von Klassen. Wenn Sie einen Wert zweimal hinzufügen, wird er nur einmal hinzugefügt. Auch wenn Sie eine nicht vorhandene Klasse entfernen, tritt ein Fehler auf. Ich hoffe, Sie finden es hilfreich.

var el = document.getElementById('myElem'); 
 

 
multiValues = { 
 
\t add: function(elem,val){ 
 
\t \t if(elem.constructor.toString().search('HTML')===-1) return; 
 
\t \t if(typeof val !=='string') return; 
 
\t \t if(!elem.attributes['data-tag']) elem.setAttribute('data-tag'); 
 
\t \t 
 
\t \t var attr = elem.attributes['data-tag']; 
 
\t \t var parsed = attr.value.split(','); 
 
\t \t var isExist = parsed.some(function(a){ 
 
\t \t \t return a === val; 
 
\t \t }); 
 
\t \t if(!isExist) parsed.push(val); 
 
\t \t elem.setAttribute('data-tag',parsed.join(',')); 
 
\t }, 
 
\t remove: function(elem,val){ 
 
\t \t if(elem.constructor.toString().search('HTML')===-1) return; 
 
\t \t if(typeof val !=='string') return; 
 
\t \t if(!elem.attributes['data-tag']) return; 
 

 
\t \t var attr = elem.attributes['data-tag']; 
 
\t \t var parsed = attr.value.split(','); 
 
\t \t parsed.some(function(a,b){ 
 
\t \t \t if(a===val){ 
 
\t \t \t \t parsed.splice(b,1); 
 
\t \t \t } 
 
\t \t elem.setAttribute('data-tag',parsed.join(',')); \t 
 
\t \t }); 
 
\t } 
 
}; 
 

 
multiValues.add(el,'window'); 
 
multiValues.add(el,'window'); 
 
multiValues.add(el,'window'); 
 
multiValues.add(el,'android'); 
 
multiValues.remove(el,'a'); 
 
multiValues.remove(el,'b'); 
 
multiValues.add(el,'something'); 
 

 
console.log(el.attributes['data-tag'].value);

<div class="resultblock" data-tag="ios" id="myElem"></div>