JQuery .show 在 IE7 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/784391/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery .show not working in IE7
提问by Malcolm
This .show and .hide works great in Firefox 3 but not in IE 7. When I click < in the list in IE the span hides but does not show again when I select Between again.
此 .show 和 .hide 在 Firefox 3 中效果很好，但在 IE 7 中无效。当我在 IE 的列表中单击 < 时，跨度会隐藏，但当我再次选择“介于”时不会再次显示。
Am I doing something wrong?
难道我做错了什么？
<select id="lst" onchange="onselectchange();">
<option>Between</option>
<option><</option>
</select>
<span id="spanAnd">And</span>
<script type="text/javascript">
function onselectchange() {
var lst = document.getElementById('lst');
var sp = document.getElementById('spanAnd');
if (lst.value == 'Between') {
$('#spanAnd').show();
}
else {
$('#spanAnd').hide();
}
}
</script>
EDIT: I tried onclick and onchange.
编辑：我试过 onclick 和 onchange。
回答by KyleFarris
Use the jQuery bind method on page load... it will help abstract your interaction logic from your presentation logic.
在页面加载时使用 jQuery 绑定方法...它将有助于从呈现逻辑中抽象出交互逻辑。
<script type="text/javascript">
$(function() {
$('#lst').bind('change',function() {
var sp = $('#spanAnd');
if($(this).val() == 'Between') {
sp.show();
} else {
sp.hide();
}
});
});
</script>
That's about as simple as it gets...
就这么简单……
NOTE:I just noticed that you are checking for the textof the option and not the value of the select box. Frankly, I think that's silly but if you need to do that for some reason, you can do this:
注意：我刚刚注意到您正在检查选项的文本，而不是选择框的值。坦率地说，我认为这很愚蠢，但如果您出于某种原因需要这样做，您可以这样做：
<script type="text/javascript">
$(function() {
$('#lst').bind('change',function() {
var sp = $('#spanAnd');
var selected_text = $(this).find('option:selected').html();
// Possibly faster ways (thanks to bayard and bendewey):
/*
var selected_text = $("#lst option[value=" + $('#lst').val() + "]").text();
// ... or ...
var selected_text = $("option[value="+$('#lst').val()+"]",this).text();
// ... or even...
var selected_text = $(this).children('option[value="+$('#lst').val()+"]").text();
*/
if(selected_text == 'Between') {
sp.show();
} else {
sp.hide();
}
});
});
</script>
To make my original suggestion work, you would need to change your HTML to:
为了使我最初的建议起作用，您需要将 HTML 更改为：
<select id="lst" onchange="onselectchange();">
<option value="Between">Between</option>
<option value="<"><</option>
</select>
... which, as I said, kinda seems like what you'd want to do anyways.
......正如我所说，这似乎是你想要做的事情。
回答by Kip
Try this (putting together some things I left in comments to two other answers):
试试这个（把我在其他两个答案的评论中留下的一些东西放在一起）：
<script type="text/javascript">
$(function() {
$("#lst").change(function() {
if ($("#lst").val() == 'Between') {
$('#spanAnd').show();
}
else {
$('#spanAnd').hide();
}
})
});
</script>
回答by wows
Try using jQuery to find and read the elements also. Something like this:
尝试使用 jQuery 来查找和读取元素。像这样的东西：
function onselectchange() {
var lst = $('#lst');
var sp = $('#spanAnd');
if ($(lst).val() == 'Between') {
$(sp).show();
}
else {
$(sp).hide();
}
}
回答by Chad Grant
There is alot of problems you have there.
你那里有很多问题。
not wrapping in $(document).ready(); The element may not be loaded when the script is executed.
不包裹在 $(document).ready(); 执行脚本时可能不会加载元素。
Using a variable name that starts with a number. (bad style and not sure that is even allowed)
使用以数字开头的变量名。（糟糕的风格，甚至不确定是否允许）
Using the variable name that corresponds to an element's ID.
使用与元素 ID 对应的变量名称。
(Old versions of IE allowed you to use ID.whatever without calling document.getElementById())
（旧版本的 IE 允许您使用 ID.whatever 而不调用 document.getElementById()）
Mixing jQuery / Standard DOM.
混合 jQuery / 标准 DOM。
Calling val() gives you the option value attribute, not the text of the option
调用 val() 为您提供选项值属性，而不是选项的文本
<select id="first">
<option value="between">Between</option>
<option><</option>
</select>
<span id="spanAnd">And</span>
<script type="text/javascript">
$(document).ready(function(){
$("#first").change(function(){
if ($("#first").val() == 'between') {
$("#spanAnd").show();
}
else {
$("#spanAnd").hide();
}
});
});
</script>
回答by DLS
First of all, to get the selected option text with jQuery is
首先，使用 jQuery 获取选定的选项文本是
$("#lst option:selected").text();
Refer to this http://docs.jquery.com/Frequently_Asked_Questions#How_do_I_get_the_text_value_of_a_selected_option.3Fif you need more clarification.
如果您需要更多说明，请参阅此http://docs.jquery.com/Frequently_Asked_Questions#How_do_I_get_the_text_value_of_a_selected_option.3F。
Second of all, to get it without a library,
其次，要在没有图书馆的情况下获得它，
var lst = document.getElementById('lst');
var ind = lst.selectedIndex;
var text = lst.options[ind].text;
回答by Bayard Randel
This works in IE and Firefox
这适用于 IE 和 Firefox
<select id="lst" onchange="onselectchange();">
<option>Between</option>
<option><</option>
</select>
<span id="spanAnd">And</span>
<script type="text/javascript">
function onselectchange() {
if ($('#lst :selected').text() == "Between") {
$('#spanAnd').show();
}
else {
$('#spanAnd').hide();
}
}
</script>
回答by C???
Update:Forgive me if this answer is way off; I'm not a jQuery user. These are my thoughts though:
更新：如果这个答案离我很远，请原谅我；我不是 jQuery 用户。这些是我的想法：
lst.valueis not a valid way to access the elements in a select element in IE; at least, I've never seen it done that way (or is that a jQuery trick?)
lst.value不是在 IE 中访问 select 元素中的元素的有效方法；至少，我从来没有见过那样做（或者这是一个 jQuery 技巧？）
Do this instead:
改为这样做：
if (lst.options[lst.selectedIndex].text == 'Between') { ...
Also notice that I used the "text" property, as this is the value between the <option>tags. The value property is the attribute that's supposed to exist on the <option> element, such as: <option value="0">Between</option>
另请注意，我使用了“text”属性，因为这是<option>标签之间的值。value 属性是应该存在于<option> 元素上的属性，例如：<option value="0">Between</option>
