【发布时间】:2014-02-28 09:45:32
【问题描述】:
我有 javascript 代码来填充页面上的选项卡,并且该脚本在 FF 和 IE 上运行良好。但是该脚本不会在 Chrome 上执行。我不确定它不会显示在 Chrome 浏览器上的代码有什么问题。 Chrome 调试检查器对我找出问题没有多大帮助。
对于投注类型选项卡(链接属性不可点击且文本不显示) HTML
<div id="tabs">
<ul id="betTypesTabs"></ul>
</div>
JS
function drawBetTypesTable(events, eventIndex) {
// Clean the tabs
$("#betTypesTabs").html('');
// The required order: WIN, PLACE, EXACTA, QUINELLA, TRIFECTA, FIRST FOUR, RUNNING DOUBLE
var orderedBetTypesIds = [1, 2, 105, 107, 106, 111, 108],
eventId = events[eventIndex].id,
categoryId = events[eventIndex].categoryId,
betTypes = events[eventIndex].markets[0].betTypes,
horseSelections = events[eventIndex].markets[0].selections,
marketDescription = events[eventIndex].markets[0].marketDescription;
// If event is the last one, Running Doubles cannot be shown
if (eventIndex == events.length-1) orderedBetTypesIds.pop();
$.each(orderedBetTypesIds, function (index, value) {
var betTypeId = orderedBetTypesIds[index],
i = null;
$.each(betTypes, function (betIndex, betTypeValue) {
if (betTypeValue.id == orderedBetTypesIds[index]) {
i = betIndex;
value = betTypeValue;
return false;
}
});
if (i != null) {
// Draw the tab
var a = document.createElement('a');
a.className = eventId + "_betTypeId_" + betTypeId;
a.text = value.name;
var li = document.createElement('li');
li.appendChild(a);
document.getElementById("betTypesTabs").appendChild(li);
// Draw the div with the table
var div = document.createElement('div');
div.id = eventId + "_betTypeId_" + betTypeId;
var table = document.createElement('table');
table.id = eventId + "_betType_" + betTypeId + "_table";
table.cellspacing = "0";
table.cellpadding = "0";
table.width = "100%";
table.className = "table_racing";
document.getElementById("tabs").appendChild(div);
document.getElementById(eventId + "_betTypeId_" + betTypeId).appendChild(table);
// Bind click action to the tab link
var currentA = $("ul#betTypesTabs").find('a[class="' + eventId + '_betTypeId_' + betTypeId + '"]');
currentA.click(function(){
// Making the tab active
$("ul#betTypesTabs li").removeClass("active");
$(this).parent().addClass("active");
// Showing the correct div
$("div#tabs div").hide();
$("#" + eventId + "_betTypeId_" + betTypeId).show();
// If it is a Running Double, highlight the next race number
if (betTypeId == 108) {
(function(eventIndex){
var nextRaceNumber = events[parseInt(eventIndex)+1].raceNumber;
$("#raceNumber_" + nextRaceNumber).removeClass("gray");
$("#raceNumber_" + nextRaceNumber).addClass("orange");
})(eventIndex);
}
});
var tableId = table.id;
(function(betTypeId, eventId, categoryId, i, tableId, eventIndex) {
// PLACE or WIN, WIN/PLACE bet types
if (betTypeId == 1 || betTypeId == 2 || betTypeId == 3) {
drawPlaceBetTypeTable(eventId, categoryId, betTypes[i]);
drawSelections(betTypeId, tableId, horseSelections);
}
// EXACTA, QUINELLA, TRIFECTA, FIRST FOUR bet types
else if (betTypeId == 105 || betTypeId == 107 || betTypeId == 106 || betTypeId == 111) {
drawExactaBetTypeTable(eventId, categoryId, betTypes[i]);
drawSelections(betTypeId, tableId, horseSelections);
drawHorseSelectionFooter(betTypeId, tableId);
}
// RUNNING DOUBLE
else if (betTypeId == 108) {
drawRunningDoubleBetTypeTable(events, eventIndex, betTypes[i], 6);
}
// Append NB description if does not exist
if (marketDescription != null && $("#" + table.id + '_notabene').length == 0) {
appendBetTableFooter(table, marketDescription);
}
})(betTypeId, eventId, categoryId, i, tableId, eventIndex);
}
});
// Click on the 1st tab
$("ul#betTypesTabs a")[0].click();
}
对于比赛类型(链接是可点击的,但比赛类型文本不会显示在 chrome 上) HTML
<div id="raceNumbers" class="racenumbers">
</div>
JS
function drawAllRaceNumbers(events) {
// Clean parent element
document.getElementById("raceNumbers").innerHTML = '';
// Draw a category name, which is same for all events
var p = document.createElement("p");
p.innerHTML = events[0].categoryName + ':';
document.getElementById("raceNumbers").appendChild(p);
for (var i in events) {
var a = document.createElement('a'),
eventNumber = events[i].raceNumber;
// Racing specials
if (eventNumber == null) {
eventNumber = parseInt(i) + 1;
a.text = eventNumber;
}
else a.text = raceAbbr + eventNumber;
a.id = "raceNumber_" + eventNumber;
a.className = "gray";
document.getElementById("raceNumbers").appendChild(a);
// Binding click event for the race number
$("#raceNumber_" + eventNumber).unbind();
(function(i, raceNumber) {
$("#raceNumber_" + raceNumber).click(function() {
drawRaceView(events, i);
});
})(i, eventNumber);
}
var div = document.createElement('div');
div.className = "clear";
document.getElementById("raceNumbers").appendChild(div);
}
编辑:删除指向我的开发环境的链接。
【问题讨论】:
-
不确定,很难发现,但请尝试代替:
a.text = eventNumber;使用$(a).text(eventNumber); -
您能否指定 events 变量包含的内容以及如何创建/获取它?
-
我会删除匿名函数,将它们移出函数和 for 循环。您也可能对此有疑问:
(function(){...}(params...))而不是(function(){..})(params..)。 -
@A.沃尔夫它不起作用
-
@Nish 但是你必须在你的代码中替换你所有的
a.text......我认为这很明显。顺便说一句,如果包含 jQuery,请使用它。不要混淆 js/jQuery 语法。您可以考虑代码一致性。编辑:如果仍然不起作用,请在您的问题中突出显示代码中的哪一行没有按预期工作。当您应该能够为我们发现它时,必须检查所有代码以发现它,这很无聊
标签: javascript jquery google-chrome firefox