如何插入多個值到數據標籤

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標記，然後你只需編寫一些JS來編輯或添加html標記。這裏有一個例子：

<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-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，如果已經存在的類那樣，那麼就更改前綴filter別的東西！

Answer 3

我剛剛用兩種方法創建了一個小對象.add和.remove。它的工作原理類似於classList用於添加和刪除類的DOM方法。如果你添加一個值兩次，它只添加一次，如果你刪除了一些不存在的類，就會出現任何錯誤。希望你會發現它有幫助。

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>