jQuery在兩個以上的類之間切換

Question

我已經發布了一個關於jQuery切換方法的問題here 但問題是，即使使用migrate插件，它也不起作用。

我想寫一個腳本，它將在五個類（0 - > 1 - > 2 - > 3 - > 4 - > 5）之間切換。

這裏是JS代碼，我使用的部分：

$('div.priority#priority'+id).on('click', function() { 
     $(this).removeClass('priority').addClass('priority-low'); 
    }); 
    $('div.priority-low#priority'+id).on('click' ,function() { 
     $(this).removeClass('priority-low').addClass('priority-medium'); 
    }); 
    $('div.priority-medium#priority'+id).on('click', function() { 
     $(this).removeClass('priority-medium').addClass('priority-normal'); 
    }); 
    $('div.priority-normal#priority'+id).on('click', function() { 
     $(this).removeClass('priority-normal').addClass('priority-high'); 
    }); 
    $('div.priority-high'+id).on('click', function() { 
     $(this).removeClass('priority-high').addClass('priority-emergency'); 
    }); 
    $('div.priority-emergency'+id).on('click', function() { 
     $(this).removeClass('priority-emergency').addClass('priority-low'); 
    }); 

這不是代碼的第一個版本 - 我已經嘗試了一些其他的東西，比如：

$('div.priority#priority'+id).toggle(function() { 
    $(this).attr('class', 'priority-low'); 
}, function() { 
    $(this).attr('class', 'priority-medium'); 
}, function() { 
    ...) 

但這它只能在第一個元素和最後一個元素之間切換。

這是我的項目是：strasbourgmeetings.org/todo

Answer 1

的事情是，當你的代碼運行你的代碼將鉤你的處理程序中的元素與類。當您更改元素上的類時，相同的處理程序仍保持連接狀態。

您可以使用一個單一的處理器，然後檢查時發生點擊該元素具有類：

$('div#priority'+id).on('click', function() { 
    var $this = $(this); 
    if ($this.hasClass('priority')) { 
     $this.removeClass('priority').addClass('priority-low'); 
    } 
    else if (this.hasClass('priority-low')) { 
     $this.removeClass('priority-low').addClass('priority-medium'); 
    } 
    else /* ...and so on... */ 
}); 

你也可以用地圖做到這一點：

var nextPriorities = { 
    "priority":   "priority-low", 
    "priority-low":  "priority-medium", 
    //...and so on... 
    "priority-emergency": "priority" 
}; 
$('div#priority'+id).on('click', function() { 
    var $this = $(this), 
     match = /\bpriority(?:-\w+)?\b/.exec(this.className), 
     current = match && match[0], 
     next = nextPriorities[current]; 
    if (current) { 
     $this.removeClass(current).addClass(next || 'priority'); 
    } 
}); 

Answer 2

[編輯：working demo ]

假設您在初始化階段已將「優先級」作爲默認類已在該元素上，則這將循環遍歷其他元素：

$('div#priority' + id) 
    .data('classes.cycle', [ 
     'priority', 
     'priority-low', 
     'priority-medium', 
     'priority-normal', 
     'priority-high', 
     'priority-emergency' 
    ]) 
    .data('classes.current', 0) 
    .on('click', function() { 
     var $this = $(this), 
      cycle = $this.data('classes.cycle'), 
      current = $this.data('classes.current'); 

     $this 
      .removeClass(cycle[current % cycle.length]) 
      .data('classes.current', ++current) 
      .addClass(cycle[current % cycle.length]); 
    }); 

Answer 3

我已經試過用toggleClass（）的唯一幫助來做到這一點，但沒有成功。 試試我的方法，它用你的五個類聲明一個數組，並通過 動態切換它們。適應你自己的名字。

//variable for the classes array 
var classes=["one","two","three","four","five"]; 
//add a counter data to your divs to have a counter for the array 
$('div#priority').data("counter",0); 
$(document).on('click','div#priority',function(){ 
    var $this=$(this); 
    //the current counter that is stored 
    var count=$this.data("counter"); 
    //remove the previous class if is there 
    if(($this).hasClass(classes[count-1])){ 
     $(this).removeClass(classes[count-1])); 
    } 

    //check if we've reached the end of the array so to restart from the first class. 
    //Note:remove the comment on return statement if you want to see the default class applied. 
    if(count===classes.length){ 
     $this.data("counter",0); 
     //return;//with return the next line is out of reach so class[0] wont be added 
    } 
    $(this).addClass(classes[count++]); 
    //udpate the counter data 
    $this.data("counter",count); 
}); 
//If you use toggleClass() instead of addClass() you will toggle off your other classes.Hope is a good answer.