jquery - 自定义进度条

Question

我正在尝试通过简单的 html/css 制作进度条。

fiddle http://jsfiddle.net/7zjbzh8r/

当我点击投票图标链接时

Voting links
<span class='t1'><a class='vote'id='1' href='javascript:void(0);'></a></span>
.
.
.

它将首先检查第一个进度链接 anchor 标记以找到所选的类，如果找不到则添加所选的类，反之亦然

//progress  <span class='p1'><a href='javascript:void(0);' id='1' class='pg'></a></span>

我有 10 个 11 投票链接和 11 进度链接，用户可以按任何顺序投票，但进度链接应该逐渐添加类，检查上一个链接是否选择了类。

下面是我试图实现这个但可能会成功的代码。

$(".vote").click(function(){

  $('.pg').each(function(i) {
    if($('.pg').hasClass('selected')){
    //$('.pg').addClass('selected');
    $('.pg').next().addClass('selected');
    }
  });

  event.stopPropagation();


});

Answer 1

您必须在当前事件处理程序范围之外的变量中记录到目前为止已点击和未点击的内容。
它不必在全局范围内，如下例所示......只要它在事件处理程序之外即可。

剩下的就是简单明了的逻辑。

Link to Fiddle

这是慷慨注释的代码:

//the keeper of the tally
var done = [];

//the event handler
$(".vote").click(function (ev) {
    //stop propagating the event
    ev.stopPropagation();

    //alias $(this)
    var self = $(this),
        //get the index of the clicked element,
        //used parent() here because parent element gives us
        //the real index
        idx = self.parent().index();
    //check tally is not already populated
    if(typeof done[idx] == 'undefined'){
        //push any value into the index(th) position of the tally
        //so that the next click does not run this again
        done[idx] = 1;
    
        //work out selected element in the progress links
        var selected = $('.pg.selected'),
            //and the one that should be selected next
            next = selected.parent().next('.p1').find('.pg');
    
        //if nothing was selected previously
        if(!selected.length){
            //the first progress element is next to be selected
            next = $('.pg:eq(0)');
        }
        //apply the desired classes
        self.addClass('selected');
        next.addClass('selected');
    }
});