使用jQuery切换锚标记的属性值

Question

我有这个HTML。

<a href="#" class="button redB" style="margin: 4px 4px 4px -4px;" id="estEditItemToggleMode" data-mode="edit">
    <img src="images/icons/light/check.png" alt="" class="icon">
    <span>Enable Editing Mode</span>
</a>

点击后我想继续切换class属性和data-mode的值 它应该像这样

if(mode == "edit") {
    class = "button blueB";
    data-mode = "select";
}
else if(mode == "select") {
    class = "button redB";
    data-mode = "edit";
}

我尝试使用它。

$('#estEditItemToggleMode').live('click', function(e){
    e.preventDefault();
    if($(this).data('mode') == "edit") {
        $(this).removeClass('redB').addClass('blueB');
        $(this).attr('data-mode', 'select');
    }
    else if($(this).data('mode') == "select") {
        $(this).removeClass('blueB').addClass('redB');
        $(this).attr('data-mode', 'edit');
    }
});

这只会将值切换一次。因此对两次或多次点击没有影响。如何正确使用它。

Answer 1

尝试如下，

DEMO

$('#estEditItemToggleMode')
     .data('mode', 'edit') //added data to the link
     .live('click', function(e){
        e.preventDefault();

        var $this = $(this);
        var mode = $this.data('mode');

        if(mode == "edit") {
            $this.removeClass('redB').addClass('blueB');
            $this.data('mode', 'select'); //Changed from .attr to .data
        }
        else if(mode == "select") {
            $this.removeClass('blueB').addClass('redB');
            $this.data('mode', 'edit'); //Changed from .attr to .data
        }
 });

并从标记中删除attr data-mode。

<a href="#" class="button redB" style="margin: 4px 4px 4px -4px;" id="estEditItemToggleMode" >
    <img src="images/icons/light/check.png" alt="" class="icon">
    <span>Enable Editing Mode</span>
</a>

编辑：缓存了一些冗余的jQuery调用。

修改2： .live已弃用，因此您应使用.on或.delegate

编辑3：小提琴输出，