两个 Javascript 之间的冲突（MailChimp 验证等脚本和 jQuery hSlides.js）
Posted
技术标签:
【中文标题】两个 Javascript 之间的冲突（MailChimp 验证等脚本和 jQuery hSlides.js）【英文标题】：Conflict between two Javascripts (MailChimp validation etc. scripts & jQuery hSlides.js) 【发布时间】：2011-02-03 22:11:32 【问题描述】：我在同一页面上运行了两个脚本，一个是 jQuery.hSlides.js 脚本http://www.jesuscarrera.info/demos/hslides/，另一个是用于 MailChimp 列表注册集成的自定义脚本。 hSlides 面板可以在这里看到：http://theatricalbellydance.com。我关闭了 MailChimp 脚本，因为它与 hSlides 脚本冲突，导致它不会完全失败（如在此处看到的 http://theatricalbellydance.com/home2/）。谁能告诉我可以对 hSlides 脚本做些什么来阻止与 MailChimp 脚本的冲突？
MailChimp 脚本
var fnames = new Array();
var ftypes = new Array();
fnames[0] = 'EMAIL';
ftypes[0] = 'email';
fnames[3] = 'MMERGE3';
ftypes[3] = 'text';
fnames[1] = 'FNAME';
ftypes[1] = 'text';
fnames[2] = 'LNAME';
ftypes[2] = 'text';
fnames[4] = 'MMERGE4';
ftypes[4] = 'address';
fnames[6] = 'MMERGE6';
ftypes[6] = 'number';
fnames[9] = 'MMERGE9';
ftypes[9] = 'text';
fnames[5] = 'MMERGE5';
ftypes[5] = 'text';
fnames[7] = 'MMERGE7';
ftypes[7] = 'text';
fnames[8] = 'MMERGE8';
ftypes[8] = 'text';
fnames[10] = 'MMERGE10';
ftypes[10] = 'text';
fnames[11] = 'MMERGE11';
ftypes[11] = 'text';
fnames[12] = 'MMERGE12';
ftypes[12] = 'text';
var err_style = '';
try
err_style = mc_custom_error_style;
catch (e)
err_style = 'margin: 1em 0 0 0; padding: 1em 0.5em 0.5em 0.5em; background: rgb(255, 238, 238) none repeat scroll 0% 0%; font-weight: bold; float: left; z-index: 1; width: 80%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; color: rgb(255, 0, 0);';
var mce_jQuery = jQuery.noConflict();
mce_jQuery(document).ready(function ($)
var options =
errorClass: 'mce_inline_error',
errorElement: 'div',
errorStyle: err_style,
onkeyup: function () ,
onfocusout: function () ,
onblur: function ()
;
var mce_validator = mce_jQuery("#mc-embedded-subscribe-form").validate(options);
options =
url: 'http://theatricalbellydance.us1.list-manage.com/subscribe/post-json?u=1d127e7630ced825cb1a8b5a9&id=9f12d2a6bb&c=?',
type: 'GET',
dataType: 'json',
contentType: "application/json; charset=utf-8",
beforeSubmit: function ()
mce_jQuery('#mce_tmp_error_msg').remove();
mce_jQuery('.datefield', '#mc_embed_signup').each(function ()
var txt = 'filled';
var fields = new Array();
var i = 0;
mce_jQuery(':text', this).each(function ()
fields[i] = this;
i++;
);
mce_jQuery(':hidden', this).each(function ()
if (fields[0].value == 'MM' && fields[1].value == 'DD' && fields[2].value == 'YYYY')
this.value = '';
else if (fields[0].value == '' && fields[1].value == '' && fields[2].value == '')
this.value = '';
else
this.value = fields[0].value + '/' + fields[1].value + '/' + fields[2].value;
);
);
return mce_validator.form();
,
success: mce_success_cb
;
mce_jQuery('#mc-embedded-subscribe-form').ajaxForm(options);
);
function mce_success_cb(resp)
mce_jQuery('#mce-success-response').hide();
mce_jQuery('#mce-error-response').hide();
if (resp.result == "success")
mce_jQuery('#mce-' + resp.result + '-response').show();
mce_jQuery('#mce-' + resp.result + '-response').html(resp.msg);
mce_jQuery('#mc-embedded-subscribe-form').each(function ()
this.reset();
);
else
var index = -1;
var msg;
try
var parts = resp.msg.split(' - ', 2);
if (parts[1] == undefined)
msg = resp.msg;
else
i = parseInt(parts[0]);
if (i.toString() == parts[0])
index = parts[0];
msg = parts[1];
else
index = -1;
msg = resp.msg;
catch (e)
index = -1;
msg = resp.msg;
try
if (index == -1)
mce_jQuery('#mce-' + resp.result + '-response').show();
mce_jQuery('#mce-' + resp.result + '-response').html(msg);
else
err_id = 'mce_tmp_error_msg';
html = '<div id="' + err_id + '" style="' + err_style + '"> ' + msg + '</div>';
var input_id = '#mc_embed_signup';
var f = mce_jQuery(input_id);
if (ftypes[index] == 'address')
input_id = '#mce-' + fnames[index] + '-addr1';
f = mce_jQuery(input_id).parent().parent().get(0);
else if (ftypes[index] == 'date')
input_id = '#mce-' + fnames[index] + '-month';
f = mce_jQuery(input_id).parent().parent().get(0);
else
input_id = '#mce-' + fnames[index];
f = mce_jQuery().parent(input_id).get(0);
if (f)
mce_jQuery(f).append(html);
mce_jQuery(input_id).focus();
else
mce_jQuery('#mce-' + resp.result + '-response').show();
mce_jQuery('#mce-' + resp.result + '-response').html(msg);
catch (e)
mce_jQuery('#mce-' + resp.result + '-response').show();
mce_jQuery('#mce-' + resp.result + '-response').html(msg);
hslides 脚本：
/*
* hSlides (1.0) // 2008.02.25 // <http://plugins.jquery.com/project/hslides>
*
* REQUIRES jQuery 1.2.3+ <http://jquery.com/>
*
* Copyright (c) 2008 TrafficBroker <http://www.trafficbroker.co.uk>
* Licensed under GPL and MIT licenses
*
* hSlides is an horizontal accordion navigation, sliding the panels around to reveal one of interest.
*
* Sample Configuration:
* // this is the minimum configuration needed
* $('#accordion').hSlides(
* totalWidth: 730,
* totalHeight: 140,
* minPanelWidth: 87,
* maxPanelWidth: 425
* );
*
* Config Options:
* // Required configuration
* totalWidth: Total width of the accordion // default: 0
* totalHeight: Total height of the accordion // default: 0
* minPanelWidth: Minimum width of the panel (closed) // default: 0
* maxPanelWidth: Maximum width of the panel (opened) // default: 0
* // Optional configuration
* midPanelWidth: Middle width of the panel (centered) // default: 0
* speed: Speed for the animation // default: 500
* easing: Easing effect for the animation. Other than 'swing' or 'linear' must be provided by plugin // default: 'swing'
* sensitivity: Sensitivity threshold (must be 1 or higher) // default: 3
* interval: Milliseconds for onMouseOver polling interval // default: 100
* timeout: Milliseconds delay before onMouseOut // default: 300
* eventHandler: Event to open panels: click or hover. For the hover option requires hoverIntent plugin <http://cherne.net/brian/resources/jquery.hoverIntent.html> // default: 'click'
* panelSelector: HTML element storing the panels // default: 'li'
* activeClass: CSS class for the active panel // default: none
* panelPositioning: Accordion panelPositioning: top -> first panel on the bottom and next on the top, other value -> first panel on the top and next to the bottom // default: 'top'
* // Callback functions. Inside them, we can refer the panel with $(this).
* onEnter: Function raised when the panel is activated. // default: none
* onLeave: Function raised when the panel is deactivated. // default: none
*
* We can override the defaults with:
* $.fn.hSlides.defaults.easing = 'easeOutCubic';
*
* @param settings An object with configuration options
* @author Jesus Carrera <jesus.carrera@trafficbroker.co.uk>
*/
(function($)
$.fn.hSlides = function(settings)
// override default configuration
settings = $.extend(, $.fn.hSlides.defaults, settings);
// for each accordion
return this.each(function()
var wrapper = this;
var panelLeft = 0;
var panels = $(settings.panelSelector, wrapper);
var panelPositioning = 1;
if (settings.panelPositioning != 'top')
panelLeft = ($(settings.panelSelector, wrapper).length - 1) * settings.minPanelWidth;
panels = $(settings.panelSelector, wrapper).reverse();
panelPositioning = -1;
// necessary styles for the wrapper
$(this).css('position', 'relative').css('overflow', 'hidden').css('width', settings.totalWidth).css('height', settings.totalHeight);
// set the initial position of the panels
var zIndex = 0;
panels.each(function()
// necessary styles for the panels
$(this).css('position', 'absolute').css('left', panelLeft).css('zIndex', zIndex).css('height', settings.totalHeight).css('width', settings.maxPanelWidth);
zIndex ++;
// if this panel is the activated by default, set it as active and move the next (to show this one)
if ($(this).hasClass(settings.activeClass))
$.data($(this)[0], 'active', true);
if (settings.panelPositioning != 'top')
panelLeft = ($(settings.panelSelector, wrapper).index(this) + 1) * settings.minPanelWidth - settings.maxPanelWidth;
else
panelLeft = panelLeft + settings.maxPanelWidth;
else
// check if we are centering and some panel is active
// this is why we can't add/remove the active class in the callbacks: positioning the panels if we have one active
if (settings.midPanelWidth && $(settings.panelSelector, wrapper).hasClass(settings.activeClass) == false)
panelLeft = panelLeft + settings.midPanelWidth * panelPositioning;
else
panelLeft = panelLeft + settings.minPanelWidth * panelPositioning;
);
// iterates through the panels setting the active and changing the position
var movePanels = function()
// index of the new active panel
var activeIndex = $(settings.panelSelector, wrapper).index(this);
// iterate all panels
panels.each(function()
// deactivate if is the active
if ( $.data($(this)[0], 'active') == true )
$.data($(this)[0], 'active', false);
$(this).removeClass(settings.activeClass).each(settings.onLeave);
// set position of current panel
var currentIndex = $(settings.panelSelector, wrapper).index(this);
panelLeft = settings.minPanelWidth * currentIndex;
// if the panel is next to the active, we need to add the opened width
if ( (currentIndex * panelPositioning) > (activeIndex * panelPositioning))
panelLeft = panelLeft + (settings.maxPanelWidth - settings.minPanelWidth) * panelPositioning;
// animate
$(this).animate(left: panelLeft, settings.speed, settings.easing);
);
// activate the new active panel
$.data($(this)[0], 'active', true);
$(this).addClass(settings.activeClass).each(settings.onEnter);
;
// center the panels if configured
var centerPanels = function()
var panelLeft = 0;
if (settings.panelPositioning != 'top')
panelLeft = ($(settings.panelSelector, wrapper).length - 1) * settings.minPanelWidth;
panels.each(function()
$(this).removeClass(settings.activeClass).animate(left: panelLeft, settings.speed, settings.easing);
if ($.data($(this)[0], 'active') == true)
$.data($(this)[0], 'active', false);
$(this).each(settings.onLeave);
panelLeft = panelLeft + settings.midPanelWidth * panelPositioning ;
);
;
// event handling
if(settings.eventHandler == 'click')
$(settings.panelSelector, wrapper).click(movePanels);
else
var configHoverPanel =
sensitivity: settings.sensitivity,
interval: settings.interval,
over: movePanels,
timeout: settings.timeout,
out: function()
var configHoverWrapper =
sensitivity: settings.sensitivity,
interval: settings.interval,
over: function() ,
timeout: settings.timeout,
out: centerPanels
$(settings.panelSelector, wrapper).hoverIntent(configHoverPanel);
if (settings.midPanelWidth != 0)
$(wrapper).hoverIntent(configHoverWrapper);
);
;
// invert the order of the jQuery elements
$.fn.reverse = function()
return this.pushStack(this.get().reverse(), arguments);
;
// default settings
$.fn.hSlides.defaults =
totalWidth: 0,
totalHeight: 0,
minPanelWidth: 0,
maxPanelWidth: 0,
midPanelWidth: 0,
speed: 500,
easing: 'swing',
sensitivity: 3,
interval: 100,
timeout: 300,
eventHandler: 'click',
panelSelector: 'li',
activeClass: false,
panelPositioning: 'top',
onEnter: function() ,
onLeave: function()
;
)(jQuery);
【问题讨论】：
【参考方案1】：$ 不再分配给 jQuery。但是，我看不到其他库正在使用 $ 吗？当你改变时会发生什么
var mce_jQuery = jQuery.noConflict();
到
var mce_jQuery = jQuery;
也许只是我没有找到使用需要调用 noConflict 的 $ 的库。
**编辑：**尝试在脚本运行之前将 $ 重新分配给 jQuery。
【讨论】：
可能是一个很好的电话，但是，不幸的是 MailChimp 脚本位于他们的服务器上，虽然我可以复制和粘贴它，但我认为万一 MailChimp 稍后更改内容是个坏主意，我不希望旧脚本破坏功能。所以唯一需要编辑的是 hslides 脚本。 嘿，对不起...这里是 JS n00b...你能告诉我该怎么做吗？【参考方案2】：我在自定义 MailChimp 代码时遇到了非常相似的问题。事实证明，另一个插件正在接管 jQuery，$ 符号不起作用。迈克尔的建议对我有用。我所做的只是在 MC 代码顶部的 $(document) 行上使用 jQuery 关键字。
我还从 MailChimp 服务器上复制了 MC js 脚本，我自己托管它。
【讨论】：
如果您基本上同意其他人（迈克尔）的观点，请添加评论而不是新答案。 还可以考虑添加原始代码的示例，然后进行更改。使用工作代码的答案更容易，而不是快速描述用于修复现有代码的过程。以上是关于两个 Javascript 之间的冲突（MailChimp 验证等脚本和 jQuery hSlides.js）的主要内容，如果未能解决你的问题，请参考以下文章
Plotly Graphs - Javascript 和 Jinja 之间的冲突