jquery - 使用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

尝试如下，

演示

$('#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
        }
 });

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

<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：小提琴输出，