7
votes

JQuery Hide () ne fonctionne pas comme prévu sur IE 8

dans FF Ceci cache toutes les divs, puis affiche l'ID sélectionné dans le menu '#RULE_RULE_TYPE', qui est le comportement attendu. Dans IE 8, il ne cache pas tous les identifiants de div: xxx pré>

Cependant, cela fonctionne dans IE 8: p>

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


3 commentaires

Fonctionne bien pour moi: jsfiddle.net/byzcv


Quel Doctype utilisez-vous dans votre page HTML? Assurez-vous également qu'il n'y a pas deux éléments avec le même ID dans votre page.


Quelle version de jQuery? J'ai remarqué que même JQuery 1.3.2 a des bizarreries étranges avec IE8 qui ont été fixées quelque part dans la ligne 1.4.x.


4 Réponses :


0
votes

Je n'ai pas vu votre HTML, mais la façon dont vous avez nommé et référencé vos identifiants ci-dessus suggère que vous utilisez le même ID plus d'une fois. Juste une supposition.


1 commentaires

Les identifiants sont sûrs à moi. Qu'en est-il de son code suggère autrement?



0
votes

Avez-vous essayé de valider votre document HTML? Je ne sais pas si cela fonctionne, mais un moyen de plus ...


0 commentaires

0
votes

Que se passe-t-il si vous ajoutez une classe à toutes les DIV que vous affichez et que vous vous cachez, puis utilisez ce code légèrement repharmé? Dans cet exemple, vous ajouteriez «Classowalldivs» comme une classe à ces DIV que vous souhaitez affecter:

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


0 commentaires

1
votes

Je gère votre échantillon juste bien dans IE8 et Chrome. Est-ce différent d'une certaine manière?

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


0 commentaires