Jquery IE6 IE7 nasconde e mostra i bug

Question

Ho fatto un codice in jquery e ajax lavorando molto bene in Safari, FF e IE8, ma non funziona in IE6.

Può 5 gruppi di moduli modificabili, che non dovrebbero essere visualizzati, ma solo i primi lavori, anche l'ajax non funziona in IE6 e IE7.

scintillation ha messo solo 2, ma è 5 come puoi vedere il link qui sotto.

$(document).ready(function(){
 var n=1;           
    $forms = $('#MemberCont'+n+' form');
    $('#MemberCont'+n+' #toogle').hide();
 $('#MemberCont'+n+' #hide').hide();

$('#MemberCont'+n+' a').bind('click', function(){
        switch(this.id){
            case 'c':
    $('#MemberCont'+n+' #change').hide();
    $('#MemberCont'+n+' #phone').hide();
    $('#MemberCont'+n+' #hide').show();
                $('#MemberCont'+n+' #toogle').show(); 
                return false;
                break;
    case 'd':
    $('#MemberCont'+n+' #change').show();
    $('#MemberCont'+n+' #phone').show();
    $('#MemberCont'+n+' #hide').hide();
                $('#MemberCont'+n+' #toogle').hide(); 
                return false;
                break;
        }
    })

    $forms.bind('submit', function(){
        var $button = $('#MemberCont'+n+' button',this).attr('disabled',true);
        var params = $(this.elements).serialize();

        var self = this;
        $.ajax({
            type: 'POST',
            url: this.action,
            data: params,

  beforeSend: function(){
                $('#MemberCont'+n+' #phone').show();
    $('#MemberCont'+n+' #hide').hide();

                $('#MemberCont'+n+' #phone').html("Loading...");
            },
            success: function(txt){

    $('#MemberCont'+n+' #top').show();
                $('#MemberCont'+n+' #cadastro').hide ();
    $('#MemberCont'+n+' #hide').hide ();
    $('#MemberCont'+n+' #toogle').hide();
    $('#MemberCont'+n+' #change').show();

    $button.attr('disabled',false);

                $('#MemberCont'+n+' #phone').html(txt);

                self.reset();
            },

            error: function(txt){
                $('#MemberCont'+n+' #phone').html(txt);
            }
        })
        return false;
    });

});

$(document).ready(function(){
 var n=2;           
    $forms = $('#MemberCont'+n+' form');
    $('#MemberCont'+n+' #toogle').hide();
 $('#MemberCont'+n+' #hide').hide();

$('#MemberCont'+n+' a').bind('click', function(){
        switch(this.id){
            case 'c':
    $('#MemberCont'+n+' #change').hide();
    $('#MemberCont'+n+' #phone').hide();
    $('#MemberCont'+n+' #hide').show();
                $('#MemberCont'+n+' #toogle').show(); 
                return false;
                break;
    case 'd':
    $('#MemberCont'+n+' #change').show();
    $('#MemberCont'+n+' #phone').show();
    $('#MemberCont'+n+' #hide').hide();
                $('#MemberCont'+n+' #toogle').hide(); 
                return false;
                break;
        }
    })

    $forms.bind('submit', function(){
        var $button = $('#MemberCont'+n+' button',this).attr('disabled',true);
        var params = $(this.elements).serialize();

        var self = this;
        $.ajax({
            type: 'POST',
            url: this.action,
            data: params,

  beforeSend: function(){
                $('#MemberCont'+n+' #phone').show();
    $('#MemberCont'+n+' #hide').hide();

                $('#MemberCont'+n+' #phone').html("Loading...");
            },
            success: function(txt){

    $('#MemberCont'+n+' #top').show();
                $('#MemberCont'+n+' #cadastro').hide();
    $('#MemberCont'+n+' #hide').hide();
    $('#MemberCont'+n+' #toogle').hide();
    $('#MemberCont'+n+' #change').show();

    $button.attr('disabled',false);

                $('#MemberCont'+n+' #phone').html(txt);

                self.reset();
            },

            error: function(txt){
                $('#MemberCont'+n+' #phone').html(txt);
            }
        })
        return false;
    });
});

Html:

    <div id="MemberCont1" style="float:left; display:block; margin: 15px 30px 10px 30px; width: 563px;">
                    <div id="ResultTitle" style="width:217px;">Business Name</div>
                    <div id="MemberPhone" style="width:340px;"><div id="hide"><a href="" id="d"><img src="../img/hide_btn.gif" width="65" height="25" alt="Hide" /></a></div><div id="phone"><?php echo $result['business']; ?></div></div>
                  <hr class="Line" />
          <div id="toogle" style="font-size:12px; color:#FFF; ">
            <div id="none" style="position:relative; float:left; display:inline; padding-bottom:2px;">Change business name</div>
                  <form action="personal_update.php" style="clear:left; margin:0 0 10px 0;">
                  <table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><input name="dataform" type="text" class="FormMember" id="dataform" />
    <input name="id_member" type="hidden" value="<?php echo $result['id_member']; ?>" />
    <input name="table" type="hidden" value="business" /></td>
    <td align="right"><input name="submit" type="image" value="submit" src="../img/submit_member.gif" /></td>
  </tr>
</table>
           </form>
             </div><!--toogle-->
             <div id="change"><a href="" id="c"><img src="../img/change_btn.gif" alt="Change" width="64" height="25" align="left" /></a></div>
       </div><!--/*MemberCont*/-->

     <div id="MemberCont2" style="float:left; display:block; margin: 15px 30px 10px 30px; width: 563px;">
                    <div id="ResultTitle" style="width:217px;">Contact Name</div>
                    <div id="MemberPhone" style="width:340px;"><div id="hide"><a href="" id="d"><img src="../img/hide_btn.gif" width="65" height="25" alt="Hide" /></a></div><div id="phone"><?php echo $result['contact']; ?></div></div>
                  <hr class="Line" />
          <div id="toogle" style="font-size:12px; color:#FFF; ">
            <div id="none" style="position:relative; float:left; display:inline; padding-bottom:2px;">Change contact name</div>
                  <form action="personal_update.php" style="clear:left; margin:0 0 10px 0;">
                  <table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><input name="dataform" type="text" class="FormMember" id="dataform" />
    <input name="id_member" type="hidden" value="<?php echo $result['id_member']; ?>" />
    <input name="table" type="hidden" value="contact" /></td>
    <td align="right"><input name="submit" type="image" value="submit" src="../img/submit_member.gif" /></td>
  </tr>
</table>
           </form>
             </div><!--toogle-->
             <div id="change"><a href="" id="c"><img src="../img/change_btn.gif" alt="Change" width="64" height="25" align="left" /></a></div>
       </div><!--/*MemberCont*/-->

Answer 1

Puoi avere un solo ID ovunque nel tuo HTML. Prova invece a utilizzare le classi per le cose che devi ripetere.

Sospetto che, una volta trovati i primi ID che stavi cercando, smettano di occuparsene.

Ecco la descrizione di ID e classi di W3.