Question

我有一个标签列表，这个列表由数据库和MVC填充。我有一个剃刀代码，可以拉入每个标签以进行排序。最近我被要求让每个标签跟踪它被点击的次数，然后重新排序显示的标签，点击标签的次数。

这是我的标签列表的剃刀代码

<ul class="pills" id="tags">
    @foreach (var tag in tags)
         {
             <li><a href="#" data-tag-selector="@tag">@tag</a></li>
         }
</ul>

我试过了 var clicks = 0并将onclick = clicks ++添加到a href 但我想我可能走错了路。我认为Javascript可能是我的目标。

Answer 1

希望这个小提琴会有所帮助。 fiddle

我通过向每个标记元素添加一个属性来跟踪点击次数。因此，每次单击该元素时，它都会增加数据单击的属性。此外，单击它时，我会使用标签，然后按照正确的顺序将它们读入dom。

请注意这是使用jquery

    $(function(){
      var $taglist = $('#tags');

      var tags = [];

      for(var i = 0; i < 5; i++){
        tags.push($('<li class="tag" data-clicked="0">' + i + '</li>'));
        $taglist.append(tags[i]);
      }

      var $tags = $('.tag');

      $tags.on('click', onClick);

      function onClick(e){
        $(this).attr('data-clicked', incrementer($(this)));
        tags = sort(tags);

        $taglist.html('');

        tags.forEach(function($tag){
          $taglist.append($tag);
        });

        $tags.on('click', onClick);
      }
    });

    function incrementer($elem){
      return parseInt($elem.attr('data-clicked')) + 1;
    }

    function sort(tags){
      return tags.sort(function($a, $b){
        return $b.attr('data-clicked') - $a.attr('data-clicked');
      })
    }

#tags li {
  display: inline;
  text-align: center;
  border: 1px solid black;
  margin: 5px;
  border-radius: 2px;
  background-color: #e2e2e2;
  box-shadow: 3px 3px 2px #f4e4e4;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
      <ul id="tags">
      </ul>
    </div>

Answer 2

这是一个简单的解决方案，在您刷新浏览器之前一直有效：

HTML部分：

var $tags = $('#tags').find('li');

$tags.click(function (e) {
  // Get the click count for the tag that was just clicked
  var tagCount = $(e.currentTarget).attr('data-click-count');

  $(e.currentTarget).attr('data-click-count', parseInt(tagCount) + 1);

  // Remove tags from the DOM but keep data so you can reorder them
  $tags.detach();

  // Sort the tags by click count
    $tags.sort(function(a, b) {
        return $(b).attr('data-click-count') - $(a).attr('data-click-count');
  });

  // Insert them back into the unordered list DOM element
  $('#tags').html($tags);

});

jQuery代码段

单击标记时，递增该标记的点击次数，然后重新排序标记列表。

<form>
  Do you qualify to join the club?<br>
  Your GPA:<br> 
  <input type="number"><br>
  How many student groups do you belong to?<br> 
  <input type="number"><br>
  Are you a SUNY student?<br> 
  <input type="text">
</form>
<button type="submit" onclick:"qualify()">See if you qualify</button>
</form>
<h4 id="qual"> Look here to check</h4>

JSFiddle演示：https://jsfiddle.net/adamgibbons/ohos5a17/

点击Javascript计算点击次数和排序标记

2 个答案:

HTML部分：

jQuery代码段