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

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

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

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>