2010-10-08 115 views
1

我想让jQuery来计算一个ID被点击的次数。 例如,如果#kwick_1被点击一次,我希望它加载视频'其他'什么也不做。jQuery绑定解除绑定点击事件

我期待在应用此整个功能,因此同样适用于2,3,4等

我将如何实现这一目标?

var timesClicked = 0; 
    $('#kwick_1, #kwick_2, #kwick_3, #kwick_4, #kwick_5, #kwick_6, #kwick_7').bind('click', function(event){ 
    var video = $(this).find('a').attr('href'); /* bunny.mp4 */ 

    var clickedID = $(this).attr('id'); /* kwick_1 */ 
    var vid = 'vid'; 
    timesClicked++; 

    $(this).removeAttr('id').removeAttr('class').attr('id',clickedID + vid).attr('class',clickedID + vid); 
    if(timesClicked == 1) { 

    $.get("video.php", { video: video, poster: 'bunny.jpg', }, function(data){ 
    $('.'+clickedID+vid).html(data); 
    }); 

    } else { 
    /* Do nothing for now */ 
    } 
    return false; 
    }); 

回答

4

您可以使用.one()做到这一点更容易一点,像这样:

$('#kwick_1, #kwick_2, #kwick_3, #kwick_4, #kwick_5, #kwick_6, #kwick_7').one('click', function(event){ 
    var video = $(this).find('a').attr('href'), clicked = this.id + 'vid'; 

    $(this).attr({ id: clicked, 'class': clicked }); 
    $.get("video.php", { video: video, poster: 'bunny.jpg', }, function(data){ 
    $('.'+clicked).html(data); 
    }); 
}).click(function() { return false; }); 

剩下的只是优化和削减重复的代码,但这个想法是对的一部分,你只能绑定想要使用.one()发生一次,那么该处理程序将在第一次执行后自行移除。然后我们使用.click()绑定return false,因为那个应该总是发生。请确保之后的与上面的例子一样,因为事件处理程序按照它们绑定的顺序运行。

如果你可以给他们所有的班级,你也可以用替代你的#kwick_1, #kwick_2....选择器,上面的这个选项仍然可以工作,而且更容易维护。