正在解决Javascript冲突
Resolving a Javascript conflict
我与JS发生了冲突。我有两个为网站上的select元素编写的脚本。一个用于在没有提交按钮的情况下提交,另一个用于自定义所选内容的样式。这是其中的两个:
<script type="text/javascript"><!--
var dropdown = document.getElementById("stallions");
function onStallion() {
if ( dropdown.options[dropdown.selectedIndex].value != null ) {
location.href = dropdown.options[dropdown.selectedIndex].value;
}
}
dropdown.onchange = onStallion;
--></script>
// Jquery plugin for styling selectboxes from DressCode.
$(document).ready(function(){
// first locate all of the select tags on the page and hide them
$("select#stallions").css('display','none');
//now, for each select box, run this function
$("select#stallions").each(function(){
var curSel = $(this);
// get the CSS width from the original select box
var gddWidth = $(curSel).css('width');
var gddWidthL = gddWidth.slice(0,-2);
var gddWidth2 = gddWidthL - 28;
var gddWidth3 = gddWidthL - 16;
// build the new div structure
var gddTop = '<div style="width:' + gddWidthL + 'px" class="selectME" tabindex="0"><div class="cornerstop"><div><div></div></div></div><div class="middle"><div><div><div>';
//get the default selected option
var whatSelected = $(curSel).children('option:selected').text();
//write the default
var gddFirst = '<div class="first"><span class="selectME gselected" style="width:'+ gddWidth2 + 'px;">'+ whatSelected +'</span><span id="arrowImg"></span><div class="clears"></div></div><ul class="selectME">';
// create a new array of div options from the original's options
var addItems = new Array();
$(curSel).children('option').each( function() {
var text = $(this).text();
var selVal = $(this).attr('value');
var before = '<li style="width:' + gddWidthL + 'px;"><a href="#" rel="' + selVal + '" tabindex="0" style="width:' + gddWidth3 + 'px;">';
var after = '</a></li>';
addItems.push(before + text + after);
});
//hide the default from the list of options
var removeFirst = addItems.shift();
// create the end of the div selectbox and close everything off
var gddBottom ='</ul></div></div></div></div><div class="cornersbottom"><div><div></div></div></div></div>'
//write everything after each selectbox
var GDD = gddTop + gddFirst + addItems.join('') + gddBottom;
$(curSel).after(GDD);
//this var selects the div select box directly after each of the origials
var nGDD = $(curSel).next('div.selectME');
$(nGDD).find('li:first').addClass("first");
$(nGDD).find('li:last').addClass('last');
//handle the on click functions - push results back to old text box
$(nGDD).click( function(e) {
var myTarA = $(e.target);
var myTarT = $(e.target).text();
var myTar = $(e.target);
//if closed, then open
if( $(nGDD).find('li').css('display') == 'none')
{
//this next line closes any other selectboxes that might be open
$('div.selectME').find('li').css('display','none');
$(nGDD).find('li').css('display','block');
//if user clicks off of the div select box, then shut the whole thing down
$(document.window || 'body').click( function(f) {
var myTar2 = $(f.target);
if (myTar2 !== nGDD) {$(nGDD).find('li').css('display','none');}
});
return false;
}
else
{
if (myTarA == null){
$(nGDD).find('li').css('display','none');
return false;
}
else {
//set the value of the old select box
$(curSel).val(myTarA);
//set the text of the new one
$(nGDD).find('span.gselected').text(myTarT);
$(nGDD).find('li').css('display','none');
return false;
}
}
//handle the tab index functions
}).focus( function(e) {
$(nGDD).find('li:first').addClass('currentDD');
$(nGDD).find('li:last').addClass('lastDD');
function checkKey(e){
//on keypress handle functions
function moveDown() {
var current = $(nGDD).find('.currentDD:first');
var next = $(nGDD).find('.currentDD').next();
if ($(current).is('.lastDD')){
return false;
} else {
$(next).addClass('currentDD');
$(current).removeClass('currentDD');
}
}
function moveUp() {
var current = $(nGDD).find('.currentDD:first');
var prev = $(nGDD).find('.currentDD').prev();
if ($(current).is('.first')){
return false;
} else {
$(prev).addClass('currentDD');
$(current).removeClass('currentDD');
}
}
var curText = $(nGDD).find('.currentDD:first').text();
var curVal = $(nGDD).find('.currentDD:first a').attr('rel');
switch (e.keyCode) {
case 40:
$(curSel).val(curVal);
$(nGDD).find('span.gselected').text(curText);
moveDown();
return false;
break;
case 38:
$(curSel).val(curVal);
$(nGDD).find('span.gselected').text(curText);
moveUp();
return false;
break;
case 13:
$(nGDD).find('li').css('display','none');
}
}
$(document).keydown(checkKey);
}).blur( function() {
$(document).unbind('keydown');
});
});
});
第一个嵌入在页面的php文件中,第二个从外部js文件中提取。我测试了一下,我知道这是他们两个之间的冲突。如果我使用第二个脚本,那么要提交的第一个脚本将不起作用。如果我删除第二个脚本,它运行得非常好。
我很乐意得到任何关于导致错误的原因以及如何解决的帮助。谢谢你的帮助!
问题在于DressDown代码与下拉列表的交互方式。
这条线路(69号线)在哪里:
//set the value of the old select box
$(curSel).val(myTarA);
它不会触发列表的更改。你可以简单地在那行后面立即添加location.href,这应该可以做你想要的事情:
....
//set the value of the old select box
$(curSel).val(myTarA);
location.href = myTarA;
//set the text of the new one
....
相关文章:
- Javascript-ID冲突的几率
- 数据与Javascript中的继承冲突
- 使用JavaScript和HTML5画布进行冲突检测
- javascript对象原型与jquery冲突
- Javascript滑块不滑动,如何判断是否存在JS冲突
- Javascript两个日期选择器冲突
- 防止WordPress javascript冲突的良好实践
- IE8/Javascript冲突?IE8正在开发中冻结整个站点-包括Javascript列表
- 对象数组上的html5 javascript冲突
- 当一个对象与javascript画布中的另一个对象发生冲突时,如何停止该对象
- Javascript 在 Rails 4.2.0 上冲突
- Rails - jQuery和javascript之间的冲突
- 如何在没有冲突的情况下将 JQuery 包含在 JavaScript 文件中
- 与 Fusion Charts 和 JQWidgets 冲突的 Javascript 库
- 多个javascript(不同版本)冲突
- Html与php中的javascript似乎存在冲突
- 两个第三方JavaScript库命名冲突
- 如何在javascript模块中包含jquery而不与全局名称空间冲突
- Javascript验证冲突
- 脚本相互冲突——JavaScript