<!doctype html>
<html>
<head>
<title>jQuery Tagit Demo Page (HTML)</title>
<script src="demo/js/jquery.1.7.2.min.js"></script>
<script src="demo/js/jquery-ui.1.8.20.min.js"></script>
<script src="js/tagit.js"></script>
<link href="demo/css/demo.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/css" href="css/tagit-stylish-yellow.css">
<script>
$(document).ready(function () {
var list = new Array();
var availableTags = [];
$('#demo2').tagit({tagSource:availableTags});
$('#demo2GetTags').click(function () {
showTags($('#demo2').tagit('tags'))
});
/*
$('li[data-value]').each(function(){
alert($(this).data("value"));
});*/
function showTags(tags) {
var list = new Array();
console.log(tags);
var string;
for (var i in tags)
string += new String(tags[i].value)
console.log(string);
}
});
</script>
</head>
<body>
<div id="wrap">
<div class="box">
<div class="note">
You can manually specify tags in your markup by adding <em>list items</em> to the unordered list!
</div>
<ul id="demo2" data-name="demo2">
<li data-value="here">here</li>
<li data-value="are">are</li>
<li data-value="some...">some</li>
<!-- notice that this tag is setting a different value :) -->
<li data-value="initial">initial</li>
<li data-value="tags">tags</li>
</ul>
<div class="buttons">
<button id="demo2GetTags" value="Get Tags">Get Tags</button>
<button id="demo2ResetTags" value="Reset Tags">Reset Tags</button>
<button id="view-tags">View Tags on the console </button>
</div>
</div>
</div>
<script>
</script>
</body>
</html>
我对这段代码的问题是这个函数
function showTags(tags) {
var list = new Array();
console.log(tags);
var string;
for (var i in tags)
string += tags[i].value;
console.log(string);
}
});
如果我这样做了,我会返回给我一个“未定义”,然后是列表项的一些值。但如果我把那个功能改成这个
function showTags(tags) {
var list = new Array();
console.log(tags);
for (var i in tags)
string += tags[i].value;
console.log(string);
}
});
它只返回“标签”这个词,为什么会这样?