データタグに複数の値を挿入する方法

Question

データタグで結果をフィルタリングするjqueryフィルタ関数を作成しました。このように：

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

私はちょうどフィルタするために別のタグをデータタグに挿入したいと思います。このように：

data-tag="ios,android,windows" 

どうすればいいですか？

Answer 1

私はあなたが求めている質問を完全に理解しているかどうかはわかりませんが、私はJSを使ってこれを達成できると思います。

あなたのHTMLにはscriptタグを追加してから、HTMLタグを編集または追加するためにJSを書くだけです。次に例を示します。

今

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

データタグをソートする：
ちょうどあなたのHTMLファイルにこのコードを追加します。

<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

これを実行する最善の方法は、クラスを使用することです。クラスの追加と削除は、他の属性よりもはるかに簡単です。クラスは、たとえばCSSに使用される他のクラスと重複してはいけません。それらにプレフィックスを付けることはさらに優れています。このように：.filter-*のみをフィルタリングするために使用されるべき

$(".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 
// ... 

クラス、彼らはそのようなクラスがすでに存在する場合、そしてちょうど何か他のものにプレフィックスfilterを変更、それらに接続されているすべてのCSSを持ってはいけません！

Answer 3

私はちょうど2つのメソッド.addと.removeで小さなオブジェクトを作成しました。それはclassListのクラスの追加と削除のDOMメソッドのように動作します。 1つの値を2回追加すると、1回だけ追加されます。既存のクラスを削除してもエラーが発生します。あなたがそれが役に立つと思うことを願っています。

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>