簡單的移動jQuery開關按鈕及替代.toggle最新的jQuery

我正在研究一個簡單的jQuery開關按鈕。你大多在手機上看到的那種。簡單的移動jQuery開關按鈕及替代.toggle最新的jQuery

[on |關]

我有我在jsfiddle中找到的下面的代碼片段。但它不會工作;我試過包裝它 -

$('.slider-button').toggle(function(){ 
    $(this).addClass('on').html('Quizz'); 
    },function(){ 
    $(this).removeClass('on').html('Read'); 
    }); 
})

我試着把它包裝在一個就緒。

$(document).ready(function(){ 
$('.slider-button').toggle(function(){ 
    $(this).addClass('on').html('Quizz'); 
    },function(){ 
    $(this).removeClass('on').html('Read'); 
    }); 
})

我加載在jQuery的最新：

<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>

加價：

<div class="slider-frame"> 
    <span class="slider-button">OFF</span> 
</div>

它根本不會切換的onClick。

編輯：這是一個小提琴的嘗試; http://jsfiddle.net/Hn27Q/

還是不明白;實際上在移動設備上看不到任何CSS3;任何建議感激。

比爾

來源

2013-12-16 Fred Randall

不要ü有相應的css文件？比較運行時應用的css與工作示例和你的嘗試。 Srry即時移動。 – EricG

什麼不工作？你發佈的代碼似乎沒問題。你能否提供一個能夠再現你的問題的小提琴？ –

toggle（）在1.9中被刪除。請參閱文檔。 – lifetimes

接受了功能交替的點擊爲V1.9的已被刪除.toggle版本（見http://api.jquery.com/toggle-event/）

你可以看到What to use instead of `toggle(...)` in jQuery > 1.8?爲一個實現功能作爲擴展..

你應該這樣使用

$('.slider-button').toggleClick (function(){ 
     $(this).addClass('on').html('Quizz'); 
    },function(){ 
     $(this).removeClass('on').html('Read'); 
    }); 
});

的易用性我複製代碼在這裏

$.fn.toggleClick = function(){ 
    var methods = arguments, // store the passed arguments for future reference 
     count = methods.length; // cache the number of methods 

    //use return this to maintain jQuery chainability 
    return this.each(function(i, item){ 
     // for each element you bind to 
     var index = 0; // create a local counter for that element 
     $(item).click(function(){ // bind a click handler to that element 
      return methods[index++ % count].apply(this,arguments); // that when called will apply the 'index'th method to that element 
      // the index % count means that we constrain our iterator between 0 and (count-1) 
     }); 
    }); 
};

來源

2013-12-16 22:58:09

簡單的移動jQuery開關按鈕及替代.toggle最新的jQuery

回答

相關問題