有点困惑，希望大家能帮忙。
看起来我可能发现了一个与 IE 相关的 jQuery bug。创建了一个小测试(包含在此处)，我可以通过它来解决问题。在 Firefox 和 Chrome 中工作正常，但在 IE8-9 中失败。
问题是当更新发生在事件回调中时，DIV“podcastStatus”没有在正确的时刻更新。您可以使用IE工具和Firebug在本地测试它，并在我在代码中注释的地方设置断点。
步骤:
- 在 Firebug 和 IE 中设置断点
- 根据我在代码中的注释开发工具
- 点击“下一个”或“上一个”
- DIV 中的文本应更改为“下一个”或“上一个”，具体取决于您单击的按钮
- DIV 中的文本应恢复为“正在播放...”
我认为它与innerHTML相关，但我已经尝试过innerHTML DIV包装技巧并且没有骰子。
注意:我使用了 .text() 和 .html()，但没有解析。
这是测试用例:
<body>
<style type="text/css">
#podcastStatus {
background-color: ButtonHighlight;
font-size: 120pt;
font-weight: bolder;
color: Black;
margin: 0 auto;
text-align: center;
position:absolute; top:0; bottom:0; left:0; right:0;
margin:auto; height:200px; width:100%;
z-index: 100;
}
</style>
<div id="podcastStatus">Playing...</div>
<div id="targetBtns">
<input type="button" name="prev" id="prev" value="Prev"/>
<input type="button" name="next" id="next" value="Next"/>
</div>
<script>
function onButtonClicked(e) {
switch (e.target.defaultValue) {
case "Next":
// Use IE tools or Firebug...
//Set breakpoint here. Immediate after this executes, DIV text should be updated to "Prev"....
$('#podcastStatus').html("Prev").show();
break;
case "Prev":
// Use IE tools or Firebug...
//Set breakpoint here. Immediate after this executes, DIV text should be updated to "Next"....
$('#podcastStatus').html("Next").show();
break;
}
//Set breakpoint here. DIV should show either "Prev" or "Next" at this point...
playPause();
}
function playPause() {
$('#podcastStatus').text("Playing...").fadeIn('slow');
}
$( "#targetBtns" ).click( function(event) { onButtonClicked(event) } );
</script>
</body>
最佳答案
您的示例代码会导致 div 的文本更改为“上一个”或“下一个”并显示。然后，它调用一个函数，将同一 DIV 的文本设置为“正在播放...”，并告诉它淡入显示——即使它已经在显示。
- 文本更改发生得如此之快，您永远看不到“上一个”或“下一个”文本
- 如果已经显示，则不会淡入。
由于这两个问题，代码似乎在所有浏览器中不执行任何操作。
总而言之，这就是我修改你的 JS 以保持一致性的方式:
var $podcastStatus = $( '#podcastStatus' );
function playPause()
{
$podcastStatus.text( 'Playing...' ).fadeIn( 'slow' );
}
$( '#targetBtns' )
.delegate( 'input[type="button"]', 'click', function onButtonClicked( e )
{
var text;
switch( $( this ).val() )
{
case 'Next':
text = 'Prev';
break;
case 'Prev':
text = 'Next';
break;
}
$podcastStatus.html( text ).show();
playPause();
e.preventDefault();
} );
关于jquery - 使用 jQuery 在事件回调中设置元素值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5561196/