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

背景

我最近接手了一个程序员的项目开发，该程序员正在使用从1.3x到1.6x的多个jquery版本...现在，我已经实现了一些高级功能，其中一些功能正在中断...最近，这是一个指令显示框，其中有一个图标，单击后会向下滑动说明说明的容器。尽管我相信最好的结果就是重写它的jquery，但是当没有使用过时的函数时，我将此示例带给SO的专家来解释为什么它已损坏。感谢您在期待中的所有帮助。 （正在使用jQuery 1.9.1）。


当前，仅显示“教学中心”（和“标题框”边框），而“单击以显示说明按钮”被隐藏（我想向上滑动）...但是实际应该发生的是实际的onClick 'img'按钮，它会向下滑动'instrucContent'类...但是在加载时以及在'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
});

最佳答案

toggle函数的版本以函数has been removed from last versions作为参数，因为使用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);
    });
}

您可以像使用toggle一样使用它：

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