如何插入多个值到数据标签

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>