新しい、より単純な回答
以前と同様に機能しますが、2 つの追加があります。1.) 最初にクラスがない場合に機能し、2.) 呼び出しの間に他の関数が要素クラスを変更した場合に機能します。また、jQuerys ネイティブの toggleClass に干渉しないように関数名を変更しました。
$.fn.fancyToggleClass = function(new_class) {
return this.each(function() {
// get the last class this function added (if exists) or false (if not)
var $this = $(this),
toggled_class = $this.data('toggled-class') || false;
// if we dont have an original class, then set it based on current class
if (toggled_class) {
$this.removeClass(toggled_class);
}
// add new class and store as data,
// which we check for next time function is called
$this.addClass(new_class).data('toggled-class', new_class);
// alert the class, just as a check to make sure everything worked!
// remove this for production, or switch to console.log
alert('element class: ' + $this.attr('class'));
});
}
更新されたフィドル: http://jsfiddle.net/facultymatt/xSvFC/3/
OLD ANSWER
元のクラスを要素のデータ属性に格納することをお勧めします。次に、関数はこのデータが設定されているかどうかを確認できます。設定されている場合は、要素データから元のクラスを追加して要素クラスをクリアし、関数に渡した新しいクラスも追加します。
データが設定されていない場合、関数は最初の実行時に現在のクラスをデータとして保存します。
コメント付きの実際の例については、このフィドルを確認してください: http://jsfiddle.net/facultymatt/xSvFC/
これがコードです。これは jquery 関数なので、任意の要素で呼び出すことができます (チェーンも可能です!)
$.fn.toggleClass = function(new_class) {
return this.each(function() {
// cache selector for this
$this = $(this);
// get original class (if exists) or false (if not)
var original_class = $this.data('original-class') || false;
// if we dont have an original class, then set it based on current class
if (!original_class) {
original_class = $this.attr('class');
$this.data('original-class', original_class);
// we do have an original class, so we know user is now trying to add class
// here we clear the class, add the original class, and add the new class
} else {
// assign the original class, and new class,
// and a space to keep the classes from becoming one
$this.attr('class', original_class + ' ' + new_class);
}
// alert the class, just as a check to make sure everything worked!
// remove this for production, or switch to console.log
alert('element class: ' + $this.attr('class'));
});
}
お役に立てれば！