由于切换中的更改，更新jQuery时代码中断

Question

背景

我最近从一位程序员那里接管了一个项目的开发，该程序员使用了从1.3x到1.6x的多个jquery版本…现在我已经实现了一些高级功能，有些功能正在崩溃。。。最近，它是一个说明显示框，其中有一个图标，单击后，它会向下滑动到解释说明的容器中。虽然我认为最好的结果是只为它重写jquery，但我将这个例子带给SO的专家，解释为什么它坏了，因为没有使用不推荐使用的函数。感谢您的帮助。(正在使用jQuery 1.9.1(。

目前，只显示"教学中心"(和"标题框"边框(，而隐藏"点击显示说明按钮"(我想是向上滑动的(。。。但实际应该发生的是点击实际的"img"按钮，它会滑下"instructionContent"类。。。但应该在加载和"img"切换时隐藏。

HTML

<div class="titlebox">
    <h3>The Instructional Center</h3>
    <div class="instruc">
        <h3><img alt="Instructions" src="images/instrucicon.jpg"></h3>
    </div>
    <div class="instrucContent">
        <h3>Instructions</h3>
        <p>TEXT TEXT TEXT TEXT stackoverflow rocks TEXT TEXT TEXT</p>
    </div>
</div>

instructions.js

$(document).ready(function() {
    $('div.instruc').toggle(function() {
        $('div.instrucContent').slideUp('normal');  
        $(this).next().slideDown('normal');
    }
    ,function() { $('div.instrucContent').slideUp('normal');
    $("div.instrucContent").hide();
    });
$('div.ddinstruc').toggle(function() {
        $('div.instrucContent').slideUp('normal');  
        $(this).next().slideDown('normal');
    }
    ,function() { $('div.instrucContent').slideUp('normal');
    $("div.instrucContent").hide();
});
    $("div.instrucContent").hide(); //closes all divs on page load
});

Answer 1

以函数为参数的toggle函数的版本已从以前的版本中删除，因为使用click自己实现它很容易。

例如：

$(document).ready(function() {
    var count = 0;
    $('div.instruc').click(function() {
        if ((count++)%2) {
           $('div.instrucContent').slideUp('normal');  
           $(this).next().slideDown('normal');
        } else {
           $('div.instrucContent').slideUp('normal');
           $("div.instrucContent").hide();
        }
    });

---

您还可以使用已删除函数的行为重新引入切换函数。

这是一个通用的替代品：

$.fn.toggleFuncs = function() {
    var functions = Array.prototype.slice.call(arguments);
    var _this = this.click(function(){
        var i = _this.data('func_count') || 0;
        functions[i%functions.length].call(_this);
        _this.data('func_count', i+1);
    });
}

你可以像使用切换一样使用它：

$(document).ready(function() {
    $('div.instruc').toggleFuncs(function() {
        $('div.instrucContent').slideUp('normal');  
        $(this).next().slideDown('normal');
    }
    ,function() { $('div.instrucContent').slideUp('normal');
    $("div.instrucContent").hide();
    });
$('div.ddinstruc').toggleFuncs(function() {
        $('div.instrucContent').slideUp('normal');  
        $(this).next().slideDown('normal');
    }
    ,function() { $('div.instrucContent').slideUp('normal');
    $("div.instrucContent").hide();
});
    $("div.instrucContent").hide(); //closes all divs on page load
});

Answer 2

您使用的切换在jQuery 1.9中已弃用，请参阅jQuery 1.9升级指南

$('div.instruc').toggle(function() {
        $('div.instrucContent').slideUp('normal');  
        $(this).next().slideDown('normal');
    }
    ,function() { $('div.instrucContent').slideUp('normal');
    $("div.instrucContent").hide();
    });

或

$('div.ddinstruc').toggle(function() {
        $('div.instrucContent').slideUp('normal');  
        $(this).next().slideDown('normal');
    }
    ,function() { $('div.instrucContent').slideUp('normal');
    $("div.instrucContent").hide();
});