1

背景

我最近从一个程序员那里接手了一个项目的开发，该程序员使用了从 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>

指令.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
});
4

2 回答 2

3

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

您可以像使用 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
});
于 2013-04-30T17:05:49.310 回答
0

您使用的切换在 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();

});
于 2013-04-30T17:08:28.123 回答