在 jQuery 1.9 删除 .toggle(function,function) 之后，有什么替代方法可以使用? [英] What is alternative to use after jQuery 1.9 removed .toggle(function,function)?

问题描述

我正在尝试创建一些可以在每次点击时交替收缩和增长的东西，但我正在为我的网站使用 jQuery 1.9..toggle(function,function) 函数已从 jQuery 1.9 中删除，所以我不确定我应该改用什么.

任何帮助都会很棒.

谢谢

jsfiddle(使用旧代码，jquery 1.8 版本):http://jsfiddle.net/TNAC6/

新的 jsfiddle (jquery 1.9):http://jsfiddle.net/TNAC6/1/

这是我尝试切换的代码.基本上我要切换的是一个圆形 div.

(函数($){$.fn.createToggle = 函数(大小){var ele = $(this);var oldSize = ele.width();console.log("在元素上创建新的切换:" + ele + " old: " + oldSize + " new: " + size );console.log("它的内容是" + ele.children(".content"));var growfn = function() {$(this).stop().animate({'宽度':尺寸+'像素'，'高度':尺寸+'像素'，'margin-left': '-'+(size/2)+'px','margin-top': '-'+(size/2)+'px'}, 500);$(this).children(".content").toggle();};var shrinkfn = function() {$(this).stop().animate({'width': oldSize+'px','高度': oldSize+'px','margin-left': '-'+(oldSize/2)+'px','margin-top': '-'+(oldSize/2)+'px'}, 500);$(this).children(".content").toggle();};ele.click(function() {//插入代码来切换东西});};})(jQuery);$(".home").createToggle(500);

和CSS:

.circleBase {-webkit-border-radius: 999px;-moz-border-radius: 999px;边界半径:999px；行为:网址(PIE.htc)；}.家 {宽度:200px；高度:200px；背景:#FF5032；位置:绝对；顶部:300px；左:300px；左边距:-100px；边距顶部:-100px；}.标题 {位置:相对；填充顶部:10%；文本对齐:居中；字体粗细:粗体；字体大小:24px；}.内容 {文本对齐:居中；显示:无；}

和 html:

<p class="title">Glen Takahashi<p><p class="content">这是内容<BR>这是内容<BR>这是内容<BR>这是内容<BR>这是内容

解决方案

有两种状态，您可以将当前切换状态保持为布尔值(我使用了 clickState).如果你想有多个状态，你可以继续给状态计数加 1，然后检查总计数的模数，以确定应该根据状态触发哪个函数.

我稍微更新了你的代码，因为 ele 实际上是你想要使用的 jQuery 对象:

http://jsfiddle.net/TNAC6/2/

Hi i'm trying to create something that will alternate shrinking and growing on every click, but i'm using jQuery 1.9 for my website. the .toggle(function,function) function was removed from jQuery 1.9, so I'm not really sure what I should use instead.

Any help would be great.

Thanks

jsfiddle (uses old code, the jquery 1.8 version): http://jsfiddle.net/TNAC6/

new jsfiddle (jquery 1.9): http://jsfiddle.net/TNAC6/1/

Here is my code I'm trying to make toggle. Basically the thing i'm toggling is a circle div.

(function($){
    $.fn.createToggle = function(size) {
        var ele = $(this);
        var oldSize = ele.width();
        console.log("creating new toggle on element: " + ele + " old: " + oldSize + " new: " + size );
        console.log("its content is" + ele.children(".content"));
        var growfn = function() {
            $(this).stop().animate({
                'width': size+'px',
                'height': size+'px',
                'margin-left': '-'+(size/2)+'px',
                'margin-top': '-'+(size/2)+'px'
            }, 500);
            $(this).children(".content").toggle();
        };
        var shrinkfn = function() {
            $(this).stop().animate({
                'width': oldSize+'px',
                'height': oldSize+'px',
                'margin-left': '-'+(oldSize/2)+'px',
                'margin-top': '-'+(oldSize/2)+'px'
            }, 500);
            $(this).children(".content").toggle();
        };
        ele.click(function() {
//insert code to toggle stuff
        });
    };
})(jQuery);

$(".home").createToggle(500);

and the css:

.circleBase {
    -webkit-border-radius: 999px;
    -moz-border-radius: 999px;
    border-radius: 999px;
    behavior: url(PIE.htc);
}

.home {
    width: 200px;
    height: 200px;
    background: #FF5032;
    position: absolute;
    top: 300px;
    left: 300px;
    margin-left: -100px;
    margin-top: -100px;
}

.title {
    position: relative;
    padding-top: 10%;
    text-align: center;
    font-weight: bold;
    font-size: 24px;
}

.content {
    text-align: center;
    display: none;
}

and the html:

<div class="circleBase home">
    <p class="title">Glen Takahashi<p>
    <p class="content">THIS IS CONTENT<BR> THIS IS CONTENT<BR> THIS IS CONTENT<BR> THIS IS CONTENT<BR> THIS IS CONTENT</p>
</div>

解决方案

With two states, you can just maintain the current toggled state as a boolean (I used clickState). If you wanted to have multiple states, you could continue to add 1 to the state count and then check the modulus of the total count to determine which function should fire based on the state.

I updated your code a bit since ele is actually the jQuery object you want to work with:

http://jsfiddle.net/TNAC6/2/

这篇关于在 jQuery 1.9 删除 .toggle(function,function) 之后，有什么替代方法可以使用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！