我在某些JavaScript中有一个错误，允许在HTML表单中拖放。
用户为每个位置选择3个玩家，除了他们选择6的Pitcher（P）和外野手（OF）。如果我禁用JavaScript并使用基本形式它工作正常但代码不允许6个选择OF虽然它适用于P。
以下是原始行：
if (sel <= 3 || (cP.options[cP.selectedIndex].text == 'P' && sel <= 6)) {
这是我的修改后的行：
if (sel <= 3 || (cP.options[cP.selectedIndex].text == 'P' && sel <= 6) || (cP.options[cP.selectedIndex].text == 'OF' && sel <= 6) ) {
我尝试在此行中交换OF和P但这没有任何区别。我做错了什么？
以下是完整的JavaScript：
var positions;
var pitchers; //global for now...
function init() {
//$('head').append('<link rel="stylesheet" href="http://www.dotrob.com/gameplan/tools/voter.css" type="text/css" />');
var votingForm = $('form');
votingForm.before('<div id="voter">' +
'<p>Use the drop down list to select a position. Drag the players from the right into the boxes. <em>The fourth,fifth and sixth boxes are only used for pitchers and outfielders</em>. Press the SUBMIT button at the bottom once you are finished. (If drag and drop is not supported in your browser then the old style form is below.)</p><br />' +
'<h2 id="currentPosition"> </h2>' +
'<label>Vote for: <select id="availablePositions"></select></label>' +
'<div id="currentVotes">' +
'First choice:<div id="current-1" class="droptarget"> </div>' +
'Second choice:<div id="current-2" class="droptarget"> </div>' +
'Third choice:<div id="current-3" class="droptarget"> </div>' +
'Fourth choice:<div id="current-4" class="droptarget"> </div>' +
'Fifth choice:<div id="current-5" class="droptarget"> </div>' +
'Sixth choice:<div id="current-6" class="droptarget"> </div>' +
'</div>' +
'<div id="currentPlayers"></div>' +
'</div>');
positions = getPositions(votingForm);
$.each(positions, function(key, value) {
$('#availablePositions')
.append($("<option></option>")
.attr("value",key)
.text(value.pos));
});
$('#currentVotes').bind('dragover', function(event) {
if ($(event.target).closest('.droptarget').hasClass('droptarget')) {
event.preventDefault();
log('dragover');
}
}).bind('drop', dropPlayer);
$('#currentPlayers').bind('dragstart', dragPlayer).bind('click', cancelEvent);
if (document.selection && document.body.createTextRange) {
$('#currentPlayers a').live('hover', function(event) {
var el = $(event.target).closest('a[id]').find('span');
console.log(el);
if (el.length > 0) {
var textRange = document.body.createTextRange();
textRange.moveToElementText(el[0]);
textRange.select();
}
});
}
$('#currentPosition').text(positions[0].pos);
$('#availablePositions').bind('change',positionsOnChange);
populatePlayersToChoose(positions[0].players)
}
function position(pos) {
var out = new Object();
out.pos = pos;
out.players = new Array();
return out;
}
function player(name,id,selection) {
var out = new Object();
out.name = name;
out.id = id;
out.selection = selection;
return out;
}
function getPositions(form) {
var out = new Array();
form.find('fieldset').each(function (i1) {
var key = $(this).find('legend').text();
out[i1] = position(key);
var tmpPlayers = new Array();
var playerName = $(this).find('p').each(function (i2) {
var playerName = $(this).text();
var playerSelect = $(this).find('select');
var playerId = playerSelect.attr("name");
var playerSelection = playerSelect.selectedIndex;
tmpPlayers[i2] = player(playerName.split('--')[0],playerId,playerSelection);
});
out[i1].players = tmpPlayers;
});
return out;
}
function positionsOnChange() {
$('#currentPosition').text(this.options[this.selectedIndex].text);
resetDropTargets(positions[this.selectedIndex].players);
populatePlayersToChoose(positions[this.selectedIndex].players);
}
function dragPlayer(event) {
event.originalEvent.dataTransfer.setData('Text', $(event.target).closest('a[id]').attr('id'));
}
function dropPlayer(event) {
var cP = $('#availablePositions')[0];
var el = $('#' + event.originalEvent.dataTransfer.getData('Text'));
data = $.trim(el.text());
number = el.attr('data-id');
$(event.target).text(data);
var sel = 0;
while (event.target.id != 'current-'+sel) {
sel++;
}
//Alan changed added OF
if (sel <= 3 || (cP.options[cP.selectedIndex].text == 'P' && sel <= 6) || (cP.options[cP.selectedIndex].text == 'OF' && sel <= 6) ) {
log(data);
log(number);
$('form select[name="' + number +'"]')
.each(function() {
$(this.parentNode.parentNode).find('select')
.each(function() {if (this.selectedIndex == sel){this.selectedIndex = 0}});
this.selectedIndex = sel;
});
var p = positions[cP.selectedIndex].players;
for (var i = 0; i < p.length; i++) {
if (p[i].id == number) {
log('found' + p[i].id + ', currently set to ' + p[i].selection);
p[i].selection = sel;
log('found' + p[i].id + ', now set to ' + p[i].selection);
}
}
}
event.preventDefault();
log('dropPlayer ' + event.target.id + ' ' + number);
}
function cancelEvent(event) {
event.preventDefault();
}
function populatePlayersToChoose(players) {
$('#currentPlayers').text('');
for (var i=0; i<players.length; i++) {
$('#currentPlayers').append(
$('<a id="a' + players[i].id + '" href="#" data-id="' + players[i].id + '" draggable="true"><span>' + players[i].name + '</span></a>')
);
if (players[i].selection > 0) {
$('#current-'+ (players[i].selection)).text(players[i].name);
}
}
}
function resetDropTargets(players) {
$('#currentVotes div.droptarget').text(' ');
}
$(document).ready(init);
function log(text) {
//console.log(text);
}