IE的jQuery css显示问题答案

【问题标题】：jQuery css display problem with I.EIE的jQuery css显示问题
【发布时间】：2011-08-29 22:48:13
【问题描述】：

我有此代码要显示->单击其中一个时阻止或不显示：

$('#kktekcekimid').click(function(){
    $('#efthavale').css('display','none');  
    $('#kapida').css('display','none'); 
    $('#kredikarti').css('display','block');    
    $('#kredikartitaksit').css('display','none');   
    $('#odemetipi').attr('value','kktekcekim'); 
});

$('#kktaksitid').click(function(){
    $('#efthavale').css('display','none');  
    $('#kapida').css('display','none'); 
    $('#kredikarti').css('display','none'); 
    $('#kredikartitaksit').css('display','block');
    $('#odemetipi').attr('value','kktaksitli'); 
}); 

$('#havaleeftid').click(function(){
    $('#efthavale').css('display','block'); 
    $('#kapida').css('display','none'); 
    $('#kredikarti').css('display','none'); 
    $('#kredikartitaksit').css('display','none');
    $('#odemetipi').attr('value','havaleeft');  
}); 

$('#kapidaodemeid').click(function(){   

    $('#kapida').css('display','block');
    $('#efthavale').css('display','none');  
    $('#kredikarti').css('display','none'); 
    $('#kredikartitaksit').css('display','none');
    $('#odemetipi').attr('value','kapidapesin');    
});

这是包含上述 div 的默认 html 代码：

<input id="radioDefault_2" name="Fieldss" type="hidden" value="" /> 
<span> 
<input id="kktekcekimid" name="Field2" type="radio" class="field radio" value="Online Kredi Kartı" <?php echo $kktekcekim_value;?> tabindex="5" onchange="handleInput(this);" onmouseup="handleInput(this);" required /> 
<label class="choice" for="kktekcekimid" > 
Online Kredi Kartı <strong>Tek Çekim</strong></label> 
</span> 
<span> 
<input id="kktaksitid" name="Field2" type="radio" class="field radio" value="Online Kredi Kartı" <?php echo $kktaksitli_value;?> tabindex="5" onchange="handleInput(this);" onmouseup="handleInput(this);" required /> 
<label class="choice" for="kktaksitid" > 
Online Kredi Kartı <strong>Taksitli</strong></label> 
</span>
<span> 
<input id="havaleeftid" name="Field2" type="radio" class="field radio" value="Havale/EFT" <?php echo $havaleft_value;?> tabindex="6" onchange="handleInput(this);" onmouseup="handleInput(this);" required /> 
<label class="choice" for="havaleeftid" > 
Havale/EFT</label> 
</span> 
<span> 
<input id="kapidaodemeid" name="Field2" type="radio" class="field radio" value="Kapıda Peşin" <?php echo $kapidapesin_value;?> tabindex="7" onchange="handleInput(this);" onmouseup="handleInput(this);" required /> 
<label class="choice" for="kapidaodemeid" > 
Kapıda Peşin</label> 
</span>

<div id="efthavale" style="display:none"></div>
<div id="kapida" style="display:none"></div>
<div id="kredikarti" style="display:none"></div>
<div id="kredikartitaksit" style="display:none"></div>
<div id="kisiselbilgiler" style="display:block"></div>

这适用于 chrome 和 firefox。但是在ie上，它始终显示为默认值，并且在单击时不显示其他div。（并且不隐藏 id="kredikarti" style="display:none" div。）

而且它从不默认显示这个 div：id="kisiselbilgiler" style="display:block"

可能是什么问题？

【问题讨论】：

我只是想祝贺你让你的代码如此可读，尽管我一个土耳其语单词都听不懂。 :-)
I.E 不处理任何有用的东西，50% 的人使用这个废话。我会杀了比尔 :) 这就是答案……
谁能告诉我在这里写这些脚本的地址是否合法？
您测试的是哪个版本的 IE？我在 IE 9 中测试了您的代码，它的工作原理与 Chrome 相同：jsfiddle.net/P2mpF
我注意到了另一个问题 - 您的 onmouseup 和 onchange 事件中的每个输入都没有在此代码中定义（handleInput）。如果没有定义该函数，它肯定会导致 IE 出现问题。

标签： jquery

【解决方案1】：

不确定这是否是您正在寻找的解决方案，但不是将其隐藏在 css 内联样式中，而是以这种方式隐藏它：

 $('#efthavale, #kapida, etc').hide();

另外，请确保您将 jQuery 括在 $(document).ready()

【讨论】：

谢谢，但显示和隐藏不起作用。这是比 css 更糟糕的解决方案（对于这些 spagetti 代码）。
我说的是替换div里面的style="display:none"。
我无法更改“ display:none ”，因为它是 php: case '': $kktekcekim_display = 'display:none';并打破；
啊，因为这可能是 IE 的问题。你能编辑PHP吗？因为您可以，而不是添加display:none，只需添加一个类并使用hide()隐藏该类
@Phil - 这根本不会在 IE 中造成问题。这是默认隐藏您希望 jQuery 控制的某些内容的标准（和正确）方法。如果您在加载时调用 .hide()，那么 div 将首先显示然后消失 - 糟糕的用户体验。