Comarades,
我尝试使用append和prepend(),但没有一个控件有效。谁能帮助我?在Internet Explorer和Firefox中工作。
守则:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title></head>
<script type="text/javascript" src="raphael-min.js"></script>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript">
selEstrutura = function(strComponent, strDestino)
{
var objDest = $('#' + strDestino);
var objComp = $('#' + strComponent);
if ((objComp != null) && (objDest != null))
{
$('#' + strDestino + ' img').remove();
objDest.append('<img id="' + strDestino + '" src="' + objComp.val() + '"');
if ((strDestino.trim() == 'eixoTracionado1') || (strDestino.trim() == 'eixoTracionado2'))
{
$('#eixoEstruturaPt1 img').remove();
$('#eixoEstruturaPt1').append('<img id="eixoEstruturaPt1" src="estrutura_semrodas.gif"');
$('#eixoEstruturaPt2 img').remove();
$('#eixoEstruturaPt2').append('<img id="eixoEstruturaPt2" src="estrutura_semrodas.gif"');
}
}
}
</script>
<body>
<div align="left" style="width:20%;float:left;height:300px;border:groove;border-color:#000000;margin-left:0px;">
<div align="right" style="float:left;width:30%">Tração: </div>
<div style="float:right;width:70%">
<select id="cboTracao" onchange="selEstrutura('cboTracao','eixoTrator');">
<option value=""> </option>
<option value="eixotrator_rodaunica.gif">Única</option>
<option value="eixotrator_rodasimples.gif">Simples</option>
<option value="eixotrator_rodadupla.gif">Dupla</option>
</select>
</div>
<div align="right" style="float:left;width:30%">Tracionado(1): </div>
<div style="float:right;width:70%">
<select id="cboTracionado1" onchange="selEstrutura('cboTracionado1','eixoTracionado1');">
<option value=""> </option>
<option value="eixotracionado_rodadosimples.gif">Simples</option>
<option value="eixotracionado_rodadoduplo.gif">Duplo</option>
</select>
</div>
<div align="right" style="float:left;width:30%">Tracionado(2): </div>
<div style="float:right;width:70%">
<select id="cboTracionado2" onchange="selEstrutura('cboTracionado2','eixoTracionado2');">
<option value=""> </option>
<option value="eixotracionado_rodadosimples.gif">Simples</option>
<option value="eixotracionado_rodadoduplo.gif">Duplo</option>
</select>
</div>
<div align="right" style="float:left;width:30%">Qtd Estepes: </div>
<div style="float:right;width:70%">
<select id="cboEstepes" onchange="selEstrutura('cboEstepes','eixoEstepes');">
<option value=""> </option>
<option value="estepe_simples.gif">01</option>
<option value="estepe_duplo.gif">02</option>
<option value="estepe_triplo.gif">03</option>
</select>
</div>
</div>
<div id="prompt" align="center" style="width:79%;float:right;border:groove;border-color:#000000;height:300px">
<div style="margin-left:30%">
<div id="eixoEstepes" style="float:left;margin-left:10px"></div>
<div style="width:20%;float:left"></div>
<div id="eixoTrator" style="float:left"></div>
<div id="eixoEstruturaPt1" style="float:left"></div>
<div id="eixoEstruturaPt2" style="float:left"></div>
<div id="eixoTracionado1" style="float:left"></div>
<div id="eixoTracionado2" style="float:left"></div>
</div>
</div>
</body>
</html>
Sugestions(Modified)
执行一些建议的更改,仍然无效。
<script type="text/javascript">
selEstrutura = function(strComponent, strDestino)
{
var objDest = $('#' + strDestino);
var objComp = $('#' + strComponent);
if ((objComp != null) && (objDest != null))
{
$('#' + strDestino + ' img').remove();
objDest.append('<img id="' + strDestino + '_img" src="' + objComp.val() + '"');
if ((strDestino.trim() == 'eixoTracionado1') || (strDestino.trim() == 'eixoTracionado2'))
{
$('#eixoEstruturaPt1 img').remove();
$('#eixoEstruturaPt1').append('<img id="eixoImgEstruturaPt1" src="estrutura_semrodas.gif"');
$('#eixoEstruturaPt2 img').remove();
$('#eixoEstruturaPt2').append('<img id="eixoImgEstruturaPt2" src="estrutura_semrodas.gif"');
}
}
}
</script>
答案 0 :(得分:3)
有一件事对我来说很奇怪,就是你要添加<img>
标签,其中“id”值与其他标签中的其他“id”值完全重复。也许WebKit不喜欢这样;这绝对是件坏事。
尝试这样的更改:
objDest.append('<img id="' + strDestino + '_img" src="' + objComp.val() + '"');
它看起来好像你忘记了“&gt;”在你的元素的最后!应该是这样的:
objDest.append('<img id="' + strDestino + '_img" src="' + objComp.val() + '">');
(如果你的DOCTYPE是XHTML,你当然应该使用“/&gt;”,但你的是“html”。)
答案 1 :(得分:1)
这些永远不会为空。它们将始终包含一个jQuery对象(即使它没有元素)。
if ((objComp != null) && (objDest != null))
您应该使用length
属性进行测试。
if ((!objComp.length) && (!objDest.length))
另外,据我所知,您正在创建一个与现有strDestino
元素具有相同ID的新元素。
objDest.append('<img id="' + strDestino + '" src="' + objComp.val() + '"');
您不能拥有2个具有相同ID的元素。
答案 2 :(得分:0)
来源工作:Opera,Safari,Chrome,IE,Mozilla。
selEstrutura = function(strComponent, strDestino)
{
$('#' + strDestino + ' img').remove();
$('#' + strDestino).append('<img id="' + strDestino + '_img" src="' + $('#' + strComponent).val() + '">');
if ((strDestino == 'eixoTracionado1') || (strDestino == 'eixoTracionado2'))
{
$('#eixoEstruturaPt1 img').remove();
$('#eixoEstruturaPt1').append('<img src="estrutura_semrodas.gif" alt=""/>');
$('#eixoEstruturaPt2 img').remove();
$('#eixoEstruturaPt2').append('<img src="estrutura_semrodas.gif" alt=""/>');
}
}
我做了朋友建议的更改,但在某些浏览器中无效。经过一些测试,我发现方法“.Trim()”无法正常工作。
感谢所有的帮助。
答案 3 :(得分:0)
有同样的问题。 php脚本生成了一个传递给jquery.each()的json。 Firefox以正确的顺序显示行,而chrome以相反的方式显示行。
问题是由对象键引起的。 Chrome在foreach之前使用键对数组进行了排序。在我的情况下,解决方案是使用自动递增的值作为键,而不是我的旧的修订号键,这是相反的。