javascript - 通过多次点击创建字符串

Question

所以我有一个看起来像这样的列表：

<ul class="clearfix alignleft">
   <li id="cat-1"><a href="#All">All</a></li>
    <li id="cat-5"><a href="#Mobile">Mobile</a></li>
    <li id="cat-4"><a href="#Webdesign">Webdesign</a></li>
</ul>

因此，当用户单击时mobile，我获取属性 href，然后切片，'#'但之后当用户单击时，webdesign假设我需要创建一个字符串.Mobile,.Webdesign，依此类推......所以我必须添加到字符串中......当用户单击锚点时，我添加了一类.clicked

如果这是可能的，有人吗？

Answer 1

尝试如下，

标记

<ul class="clearfix alignleft" id="trackClick"> <!-- added trackClick -->
   <li id="cat-1"><a href="#All">All</a></li>
    <li id="cat-5"><a href="#Mobile">Mobile</a></li>
    <li id="cat-4"><a href="#Webdesign">Webdesign</a></li>
</ul>

JS：

var tracker = [];
$('#trackClick').find('a').click( function () {
   tracker.push($(this).attr('href').replace('#', '.')); 
   //or tracker.push('.' + $(this).attr('href').substring(1));
});

console.log(tracker); // will print clicked href .Mobile,.Webdesign

演示

Answer 2

var classStr = '';
$('ul a').on('click', function(e) {
  e.preventDefault();
  classStr += (classStr.length > 0 ? ', ' : '') + this.href.replace('#', '.');
});

你也可以把它放在一个数组中，@vega 显示：

var classStr = [];
$('ul a').on('click', function(e) {
  e.preventDefault();
  // $.unique() to make sure that no multiple instance of href
  $.unique(classStr.push(this.href.replace('#', '.'))); 
});
console.log(classStr.join(', '));