JQuery .show 在 IE7 中不起作用答案

【问题标题】：JQuery .show not working in IE7JQuery .show 在 IE7 中不起作用
【发布时间】：2010-10-21 12:40:02
【问题描述】：

这个 .show 和 .hide 在 Firefox 3 中效果很好，但在 IE 7 中效果不佳。当我在 IE 的列表中单击

我做错了吗？

    <select id="lst" onchange="onselectchange();">
        <option>Between</option>
        <option>&lt;</option>
    </select>   
    &nbsp;&nbsp;
    <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>

编辑：我尝试了 onclick 和 onchange。

【问题讨论】：

另外，你的 sp 变量在那里做什么？你从不使用它。
不要因为你自己的错误而责怪 jQuery
使用 jQuery 时不再需要使用 getElementById。使用选择器 $('#myId')
马尔科姆，你从来没有为这个问题选择过答案。你有没有解决过？如果没有，我想帮助您解决它，以便访问者在偶然发现此问题/问题时可以获得答案。如果是这样，您应该继续这样做。

标签： jquery internet-explorer-7

【解决方案1】：

在页面加载时使用 jQuery 绑定方法...它将帮助您从演示逻辑中抽象出交互逻辑。

<script type="text/javascript">
    $(function() {
        $('#lst').bind('change',function() {
            var sp = $('#spanAnd');
            if($(this).val() == 'Between') {
               sp.show();
            } else {
               sp.hide();
            }
        });
    });
</script>

就是这么简单......

注意：我刚刚注意到您正在检查选项的文本，而不是选择框的值。坦率地说，我认为这很愚蠢，但如果你出于某种原因需要这样做，你可以这样做：

<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>

要使我最初的建议生效，您需要将 HTML 更改为：

<select id="lst" onchange="onselectchange();">
    <option value="Between">Between</option>
    <option value="&lt;">&lt;</option>
</select>

...正如我所说，这似乎是您无论如何都想做的事情。

【讨论】：

顺便说一句，我认为你的方法是最好的发布，但是 jquery 文档建议使用 ($('#id :selected').text() 来获取选项文本而不是值.val()。大概如果没有指定选项值，则认为该值等同于选项文本。
+1 这是我在 jQuery 中的做法，我不喜欢新旧混用。
@Bayard Randel 你能链接到那个文档吗？我已经对 $('#id :selected') 进行了性能测试，它明显慢于 $('#id').val();
stackoverflow.com/questions/541236/…
任何真正的理由使用 .bind('change', ...) 代替 .change(function()) ？

【解决方案2】：

试试这个（将我在 cmets 中留下的一些东西放在另外两个答案中）：

<script type="text/javascript">
$(function() {
  $("#lst").change(function() {
    if ($("#lst").val() == 'Between') {
      $('#spanAnd').show();
    }
    else {
      $('#spanAnd').hide();
    }
  })
});
</script>

【讨论】：

【解决方案3】：

尝试使用 jQuery 来查找和读取元素。像这样的：

 function onselectchange() {
       var lst = $('#lst');
       var sp = $('#spanAnd');
       if ($(lst).val() == 'Between') {
           $(sp).show();
       }
       else {
           $(sp).hide();
       }
   }

【讨论】：

例如，当它已经是一个 jQuery 对象时，没有理由（事实上，我很惊讶它起作用了）执行 '$(sp).show()'。您正在有效地将 jQuery 对象转换为 jQuery 对象。你可以简单地使用'sp.show()'
@KyleFarris，尽管您的权利在重新包装 jquery 对象集方面没有功能差异。 $($($($(sp)))) 仍然可以正常工作。
@bendewey，是的，我就是这么想的。我隐约记得当我第一次学习 jQuery 时经常这样做，它从来没有给我带来任何问题。不过会占用更多内存。 :-\
@KyleFarris - 好点，我一直这样做！ :) 很高兴知道。

【解决方案4】：

你有很多问题。

不包装在 $(document).ready();执行脚本时可能不会加载元素。

使用以数字开头的变量名。（风格不好，甚至不确定是否允许）

使用与元素 ID 对应的变量名。

（旧版本的 IE 允许你使用 ID.whatever 而不调用 document.getElementById()）

混合 jQuery / 标准 DOM。

调用 val() 为您提供选项值属性，而不是选项的文本

   <select id="first">
        <option value="between">Between</option>
        <option>&lt;</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>

【讨论】：

$(document).ready(function(){ ... });与 $(function() { ... }); 相同；

【解决方案5】：

更新：如果这个答案离题了，请原谅我；我不是 jQuery 用户。这些是我的想法：

lst.value 不是在 IE 中访问 select 元素中的元素的有效方法；至少，我从来没有见过它这样做（或者这是一个 jQuery 技巧？）

改为这样做：

if (lst.options[lst.selectedIndex].text == 'Between') { ...

还要注意我使用了“text”属性，因为这是<option> 标签之间的值。 value 属性是应该存在于<option> 元素上的属性，例如：<option value="0">Between</option>

【讨论】：

我认为 $("#lst").val() 应该可以跨浏览器工作。如果您使用的是 jquery，请使用 jquery。 :)

【解决方案6】：

首先，用jQuery获取选中的选项文本是

$("#lst option:selected").text();

如果您需要更多说明，请参阅此http://docs.jquery.com/Frequently_Asked_Questions#How_do_I_get_the_text_value_of_a_selected_option.3F。

其次，要在没有库的情况下获得它，

var lst = document.getElementById('lst');
var ind = lst.selectedIndex;

var text = lst.options[ind].text;

【讨论】：

【解决方案7】：

这适用于 IE 和 Firefox

    <select id="lst" onchange="onselectchange();">
        <option>Between</option>
        <option>&lt;</option>
    </select>   

    <span id="spanAnd">And</span>

   <script type="text/javascript">
       function onselectchange() {
           if ($('#lst :selected').text() == "Between") {
               $('#spanAnd').show();
           }
           else {
               $('#spanAnd').hide();
           }
       }
   </script>

【讨论】：