Question

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

当我点击投票图标链接

时

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>

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

以下是我试图实现这一目标但可能成功的代码。

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

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

  event.stopPropagation();


});

Answer 1

你不能在一个循环中这样做，你必须使用计时器将其设置为1。我选择所有不是.selected .pg，并使用索引i将它们偏移100毫秒（在这种情况下）

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

Answer 2

这将检查以前的＆＃39; Progres＆＃39;在添加到下一个类之前设置类，匹配按下的投票链接。

因此，如果没有其他设置，则Vote1仅设置Progres1。如果设置了Progres2，则Vote3仅设置Progres3。

jsfiddle

$(".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();
});

Answer 3

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

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

的 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'); } });

自定义进度条

3 个答案:

的 Link to Fiddle