更新jQuery时由于切换中的更改而导致代码中断 背景

我最近从一个程序员那里接手了一个项目的开发，该程序员使用了从1.3x到1.6x的多个jquery版本。。。现在我已经实现了一些高级功能，有些功能正在崩溃。。。最近，它是一个指示显示框，其中有一个图标，单击该图标后，将滑下容器，解释指示。尽管我相信最好的结果是重写jquery，但我还是将这个示例带给SO的专家，以解释为什么在没有使用不推荐的函数的情况下，jquery会出现问题。谢谢你的帮助。（正在使用jQuery 1.9.1）

目前，只显示了“教学中心”（和“标题框”边框），而隐藏了“单击显示说明按钮”（我想是向上滑动的）。。。但实际上应该发生的是，只要点击实际的“img”按钮，它就会从“instrucContent”类中滑下……但在加载和“img”切换时应该隐藏

HTML

---

以函数为参数的

切换

函数的版本，因为使用

单击

可以轻松实现

例如：

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

---

jQuery 1.9中不推荐使用您使用的切换，请参阅

或

---

嗯……在“将所有切换”更改为“单击”后，该函数似乎仍然不起作用……看到它还有什么问题吗？您不必将切换替换为单击，还需要使用某种计数器来重现相同的行为。但在上面的示例中，它不会隐藏页面加载时的实际内容div。。。。好的，我知道问题出在哪里了（你使用

这个
），我编辑了我的toggleFuncs“plugin”。另一个注意事项是……是否有任何原因，在div向下滑动后，当我单击时，它“snap”关闭，而不是向上滑动？不应
$（'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
});

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

});