jquery与JS脚本冲突

jquery conflict with js script

本文关键字：冲突脚本 JS jquery 更新时间：2023-09-26

欢迎大家，

我的图像滑块有问题，它成功运行直到轮询脚本执行然后停止，尝试组合两个脚本不起作用也尝试使用 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");
    }
});
};

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

每次执行window.onload =时，以前的分配都将被覆盖。在此处查看演示：

输出显示，第一个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");
        }
    });
});

希望有帮助。

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

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

$.noConflict（）;

但请确保你的JavaScript代码本身没有错误。使用Firebug和console.log（''）来测试您的脚本。