Question

背景

我最近从一个使用多个jquery版本从1.3x到1.6x的程序员接管了一个项目的开发...现在我已经实现了一些高级功能，一些功能正在破坏...最近它是一个指示显示框，有一个图标，点击后它向下滑动容器，解释说明。虽然我认为最好的结果就是为它重写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
});

Answer 1

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

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

$(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 upgrade guide

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

});

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

背景

HTML

instructions.js

2 个答案: