javascript - 简单的移动 jQuery 切换按钮和 .toggle 最新 jQuery 的替代品

Question

我正在开发一个简单的 jQuery 切换按钮。您最常在移动设备上看到的那种。

[ 上 |关闭]

我在 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。

编辑:这是一次 fiddle 尝试； http://jsfiddle.net/Hn27Q/

还是获取不到；事实上，CSS3 在移动设备上是看不到的；任何建议表示赞赏。

• 比尔

Answer 1

自 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)
        });
    });
};