Question

我正在研究一个简单的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;任何建议表示赞赏。

比尔

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

Simple Mobile jQuery Switch按钮＆amp;替代.toggle最新的jQuery

1 个答案: