Question

在FF中，这会隐藏所有div，然后显示从'#rule_rule_type'菜单中选择的ID，这是预期的行为。在IE 8中，它不会隐藏所有div id：

<script type="text/javascript" charset="utf-8">
  (function($){
    $('#rule_rule_type').change(function() {
      $('#allowed_senders, #blocked_senders, #blocked_character_set, #custom').hide();
      var id = $(this).val();
      $('#' + id).show();
    });
  })(jQuery); 
</script>

但是，这可以在IE 8中运行：

<script type="text/javascript" charset="utf-8">
  (function($){
    $('#rule_rule_type').change(function() {
      $('#allowed_senders').hide();
      $('#blocked_senders').hide();
      $('#blocked_character_set').hide();
      $('#custom').hide();
      var id = $(this).val();
      $('#' + id).show();
    });
  })(jQuery); 
</script>

这很乱。我怎样才能将其清理得更简洁，仍可在IE 8中使用？

谢谢，
芯片城堡
http://invoicethat.com

Answer 1

我在IE8和Chrome中运行你的样本很好。它在某种程度上有所不同吗？

<!DOCTYPE html>
<html lang="en">
<head>
    <title>jQuery Sandbox</title>
</head>
<body>

    <select id='rule_rule_type'>
        <option value="allowed_senders">allowed_senders</option>
        <option value="blocked_senders">blocked_senders</option>
        <option value="blocked_character_set">blocked_character_set</option>
        <option value="custom">custom</option>
    </select>

    <hr />

    <div id="allowed_senders">#allowed_senders</div>
    <div id="blocked_senders">#blocked_senders</div>
    <div id="blocked_character_set">#blocked_character_set</div>
    <div id="custom">#custom</div>

    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
    <script type="text/javascript">

        $(function () {

            $('#rule_rule_type').change(function () {

                $('#allowed_senders, #blocked_senders, #blocked_character_set, #custom').hide();

                var id = $(this).val();
                $('#' + id).show();

            });

        });

    </script>
</body>
</html>

Answer 2

我没有看到您的HTML，但您在上面命名和引用上述ID的方式表明您可能多次使用相同的ID。只是一个猜测。

Answer 3

您是否尝试过验证HTML文档？不知道这是否有效，但还有一个方法......

Answer 4

如果您向所显示和隐藏的所有DIV添加一个类，然后使用这个略微改写的代码，会发生什么？在此示例中，您将“classofalldivs”作为类添加到您想要影响的div中：

  (function($){
    $('#rule_rule_type').change(function() {
      var id = $(this).val();
      $('#' + id).show();
      $('.classofalldivs:not(' + '#' + id+ ')').hide();
    });
  })(jQuery);

这使用“not”伪选择器隐藏除了你正在显示的div之外的所有内容，并且有机会在IE和FF中工作。

话虽如此，我同意其他建议，即您的原始代码似乎没有错误，因此可能还有其他奇怪的事情发生。你能发布一个完整的问题完整的例子，以便其他人可以重现吗？

jQuery hide（）在IE 8上无法正常工作

4 个答案: