自定义进度条

Question

我试图通过简单的html/css制作一个进度条。

小提琴http://jsfiddle.net/7zjbzh8r/

当我点击投票图标链接时

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

它将首先添加检查第一个进度链接锚标记以查找已选择的类，如果未找到，则添加选中的类，反之亦然。

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

我有十个11个投票链接和11个进度链接，用户可以按任何顺序投票，但是进度链接应该逐步添加类，检查以前的链接是否有类选择。

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

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

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

  event.stopPropagation();


});

Answer 1

您必须在当前事件处理程序范围之外的变量中记录迄今单击的内容和未单击的内容。

它不必在全球范围内，如下例所示.只要它在事件处理程序之外。

其余的都是简单明了的逻辑。

链接到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');
    }
});

Answer 2

你不能在一个循环中这样做，你必须用一个计时器把它设为In1 go。我选择了所有非.selected .pg的，并使用索引i来用100 in来抵消它们(在本例中)

$('.pg:not(.selected)').each(function(i){
    $elem = $(this);
    setTimeout(
        function(){ $elem.addClass('selected') },
        i*100
        );
});

Answer 3

这将得到检查以前的'Progres‘是否有类设置，然后添加到下一个，匹配的投票链接按下。

因此，Vote1只在没有设置其他设置的情况下设置Progres1。Vote3只在设置了Progres3时才设置Progres2。

小提琴

$(".vote").click(function () {
    var curID;    
    curID = $(this).attr('id');
    curID = Number(curID);
    $('.pg').each(function (i) {
        if ( curID === 1 && !$('.pg').hasClass('selected') ) {
            $('[id=' + (curID) + '].pg').addClass('selected');
        }
        if ( $('[id=' + (curID - 1) + '].pg').hasClass('selected') ) {
            $('.pg').removeClass('selected');
            $('[id=' + (curID) + '].pg').addClass('selected');
        }
    });
    event.stopPropagation();
});