jquery与js脚本冲突答案

【问题标题】：jquery conflict with js scriptjquery与js脚本冲突
【发布时间】：2012-06-03 02:08:51
【问题描述】：

欢迎大家，

我的图像滑块有问题，它运行成功，直到执行轮询脚本然后它停止，尝试结合两个脚本没有工作还尝试使用 noConflict，但都停止了。

这是滑块

(function ($) {
    $.fn.s3Slider = function (vars) {
        var element = this;
        var timeOut = (vars.timeOut != undefined) ? vars.timeOut : 4000;
        var current = null;
        var timeOutFn = null;
        var faderStat = true;
        var mOver = false;
        var items = $("#sliderContent .sliderImage");
        var itemsSpan = $("#sliderContent .sliderImage span");
        items.each(function (i) {
            $(items[i]).mouseover(function () {
                mOver = true
            });
            $(items[i]).mouseout(function () {
                mOver = false;
                fadeElement(true)
            })
        });
        var fadeElement = function (isMouseOut) {
                var thisTimeOut = (isMouseOut) ? (timeOut / 2) : timeOut;
                thisTimeOut = (faderStat) ? 10 : thisTimeOut;
                if (items.length > 0) {
                    timeOutFn = setTimeout(makeSlider, thisTimeOut)
                } else {
                    console.log("Poof..")
                }
            };
        var makeSlider = function () {
                current = (current != null) ? current : items[(items.length - 1)];
                var currNo = jQuery.inArray(current, items) + 1;
                currNo = (currNo == items.length) ? 0 : (currNo - 1);
                var newMargin = $(element).width() * currNo;
                if (faderStat == true) {
                    if (!mOver) {
                        $(items[currNo]).fadeIn((timeOut / 6), function () {
                            if ($(itemsSpan[currNo]).css("bottom") == 0) {
                                $(itemsSpan[currNo]).slideUp((timeOut / 6), function () {
                                    faderStat = false;
                                    current = items[currNo];
                                    if (!mOver) {
                                        fadeElement(false)
                                    }
                                })
                            } else {
                                $(itemsSpan[currNo]).slideDown((timeOut / 6), function () {
                                    faderStat = false;
                                    current = items[currNo];
                                    if (!mOver) {
                                        fadeElement(false)
                                    }
                                })
                            }
                        })
                    }
                } else {
                    if (!mOver) {
                        if ($(itemsSpan[currNo]).css("bottom") == 0) {
                            $(itemsSpan[currNo]).slideDown((timeOut / 6), function () {
                                $(items[currNo]).fadeOut((timeOut / 6), function () {
                                    faderStat = true;
                                    current = items[(currNo + 1)];
                                    if (!mOver) {
                                        fadeElement(false)
                                    }
                                })
                            })
                        } else {
                            $(itemsSpan[currNo]).slideUp((timeOut / 6), function () {
                                $(items[currNo]).fadeOut((timeOut / 6), function () {
                                    faderStat = true;
                                    current = items[(currNo + 1)];
                                    if (!mOver) {
                                        fadeElement(false)
                                    }
                                })
                            })
                        }
                    }
                }
            };
        makeSlider()
    }
})(jQuery);

这是投票脚本

window.onload = function() {
$(".sidePollCon").load("ar_poll.html", function(r, s, xhr) {

    if (s == "error") {
        $(".sidePollCon").load("poll.html");


    } else {
        $(".vote_booroo").html("صوت الان");
        $(".viewresults").html("شاهد النتيجة");
        $("fieldset p").html("");
        $(".results_booroo p").html("");
        $(".result_booroo").attr("src", "../images/poll_color.jpg");

    }

});

};

【问题讨论】：

错误是什么？
使用firebug查看是否有javascript错误。
等待时...没有冲突并不能解决您的 javascript 错误。 ;-) 见api.jquery.com/jQuery.noConflict
投票脚本在没有滑块的情况下是否可以工作？

标签： javascript jquery slider conflict

【解决方案1】：

一个潜在的问题可能是window.onload 分配。很容易发生冲突。

每次您执行window.onload = 时，之前的分配都会被覆盖。见演示here:

输出显示第一个 window.onload 赋值从未被调用，而 jQuery 替代项确实被调用。

jQuery.noConflict 在这方面做得很少。它所做的只是防止覆盖$ 符号，以便另一个库可以使用它。

因此，如果您还使用window.onload 事件来调用滑块，那么您就有冲突了。使用jquery格式可以轻松解决这个问题：

$(window).load(function() {
    ...
});

不过，您通常会将事件与$(document).load(function(){...}); 或简称：$(function(){...}) 联系起来。

所以对于您的投票，应该是：

$(function(){
    $(".sidePollCon").load("ar_poll.html", function(r, s, xhr) {

        if (s == "error") {
            $(".sidePollCon").load("poll.html");


        } else {
            $(".vote_booroo").html("صوت الان");
            $(".viewresults").html("شاهد النتيجة");
            $("fieldset p").html("");
            $(".results_booroo p").html("");
            $(".result_booroo").attr("src", "../images/poll_color.jpg");

        }

    });
});

希望对您有所帮助。

【讨论】：

noConflict 停止两个脚本，尝试另一个事件来调用这两个方法，但问题仍然存在，
@mgamal 唯一可能发生的方法是当您遇到致命错误时。请发布该错误，否则我们无法帮助您。

【解决方案2】：

可以使用 noconflict() 解决 jquery 中的冲突（可能与另一个 JS 库 .. 比如 script.aculo.us）

http://api.jquery.com/jQuery.noConflict/

$.noConflict();

但请确保您的 javascript 代码本身没有错误。使用萤火虫和 console.log('') 来测试你的脚本。

【讨论】：