Modulo HTML e javascript --- mostra un modulo diverso nella stessa tabella

Ho 4 moduli in una tabella HTML, utilizzare il pulsante 4 per chiamare il modulo.Modulo HTML e javascript --- mostra un modulo diverso nella stessa tabella

HTML:

<div id="myAccordion"> 
    <table id="edit" 
     class="table table-striped table-bordered table-hover table-condensed table-nonfluid1 thumbnail"> 
    <tbody> 
     <tr> 
     <td width=50%> 
      <button type="button" class="btn btn-info btn-lg" data-parent="#myAccordion" 
        id="cpass" 
        onclick="document.getElementById('col').style.display = 'inline'">form1 
      </button> 
     </td> 
     <td width=50%> 
      <button type="button" class="btn btn-primary btn-lg" data-parent="#myAccordion" 
        id="cinfo" 
        onclick="document.getElementById('col').style.display = 'inline'">form2 
      </button> 
     </td> 
     </tr> 
     <tr> 
     <td width=50%> 
      <button type="button" class="btn btn-info btn-lg" data-parent="#myAccordion" 
        id="cmail" 
        onclick="document.getElementById('col').style.display = 'inline'">form3 
      </button> 
     </td> 
     <td width=50%> 
      <button type="button" class="btn btn-primary btn-lg" data-parent="#myAccordion" 
        id="cplace" 
        onclick="document.getElementById('col').style.display = 'inline'">form4 
      </button> 
     </td> 
     <tr> 
     <td colspan="2" style="display:none;" id="col"> 
      <div id="form1" class="collapse"> 
      <form method="POST" action="updatepassc.php" novalidate="novalidate" id="1"> 
       <div class="form-group"> 
       <label for="oldpassword" class="control-label ">1:</label> 
       <input type="password" class="form-control" id="oldpassword" 
         name="oldpassword"> 
       <span class="help-block"></span> 
       </div> 
       <div class="form-group"> 
       <label for="newpassword" class="control-label ">2:</label> 
       <input type="password" class="form-control" id="newpassword" 
         name="newpassword"> 
       <span class="help-block"></span> 
       </div> 
       <div class="form-group"> 
       <label for="newpassword1" class="control-label ">3:</label> 
       <input type="password" class="form-control" id="newpassword1" 
         name="newpassword1"> 
       <span class="help-block"></span> 
       </div> 
       <button type="submit" class="btn btn-success btn-block">yes</button> 
      </form> 
      </div> 
      <div id="form2" class="collapse"> 
      . 
      <form method="POST" action="updateinfo.php" novalidate="novalidate"> 
       <div class="form-group"> 
       <label for="newinfo" class="control-label ">2</label> 
       <textarea class="form-control" rows="3" id="newinfo" 
          name="newinfo">></textarea> 
       <span class="help-block"></span> 
       </div> 
       <button type="submit" class="btn btn-success btn-block">yes</button> 
      </form> 
      </div> 

      <div id="form3" class="collapse"> 
      . 
      <form method="POST" action="updateinfo.php" novalidate="novalidate"> 
       <div class="form-group"> 
       <label for="newinfo" class="control-label ">3</label> 
       <textarea class="form-control" rows="3" id="newinfo" 
          name="newinfo">></textarea> 
       <span class="help-block"></span> 
       </div> 
       <button type="submit" class="btn btn-success btn-block">3</button> 
      </form> 
      </div> 
      <div id="form4" class="collapse"> 
      . 
      <form method="POST" action="updateinfo.php" novalidate="novalidate"> 
       <div class="form-group"> 
       <label for="newinfo" class="control-label ">4</label> 
       <textarea class="form-control" rows="3" id="newinfo" 
          name="newinfo"></textarea> 
       <span class="help-block"></span> 
       </div> 
       <button type="submit" class="btn btn-success btn-block">yes</button> 
      </form> 
      </div> 
     </td> 
     </tr> 
    </tbody> 
    </table> 
</div>

e voglio mostrare in forma diversa (td id = "col"), ma avere un errore, mostrerà due form in stesso time.I vuole se clicco un pulsante, 1 modulo viene aperto, antera modulo verrà close.For esempio, se la forma 1 aperto, forma 2,3,4 chiuderà

Questo è il codice javascript:

<script type="text/javascript"> 
$(document).ready(function() { 
    $('#cpass').click(function() { 
     $('#form1').collapse('show'); 
     if ($('#form2').is(':visible')) 
      $('#form2').collapse('hide'); 
    }); 
    $('#cinfo').click(function() { 
     $('#form2').collapse('show'); 
     if ($('#form1').is(':visible')) 
      $('#form1').collapse('hide'); 
    }); 
    $('#cmail').click(function() { 
     $('#form3').collapse('show'); 
     if ($('#form4').is(':visible')) 
      $('#form4').collapse('hide'); 
    }); 
    $('#cplace').click(function() { 
     $('#form4').collapse('show'); 
     if ($('#form3').is(':visible')) 
      $('#form3').collapse('hide'); 
    }); 
});

Il jsfiddle

come posso risolvere il problema?

fonte

2015-04-19 paul0080

Non inserire '

aggiornati codice jQuery con slideUp e slideDown. apre solo una forma alla volta. anche aggiungere un nome di classe significativo comune per tutte le forme in modo che si può chiamare nascondere/sildeUp senza esplicitamente utilizzando più id/class

$(document).ready(function() { 
    $('#cpass').click(function() { 
     $('#form1').slideDown(); 
     $('#form2,#form3,#form4').slideUp(); 
    }); 
    $('#cinfo').click(function() { 
     $('#form2').slideDown(); 
     $('#form1,#form3,#form4').slideUp(); 
    }); 
    $('#cmail').click(function() { 
     $('#form3').slideDown(); 
     $('#form1,#form2,#form4').slideUp(); 
    }); 
    $('#cplace').click(function() { 
     $('#form4').slideDown(); 
     $('#form1,#form2,#form3').slideUp(); 
    }); 
});

edit: rimuovere in linea onclick e CSS per mantenere il codice html pulito

fiddle

fonte

2015-04-19 07:48:05 rkamath

Questo è un modo più pulito per farlo –

Sebbene esistano modi per semplificare il codice JS, manterrò il formato generale e lo modificherò leggermente per un effetto. Si noti che è possibile utilizzare una virgola per selezionare più oggetti div.

È possibile rendere il pulitore del codice aggiungendo un'animazione come suggerito da rkamath. Il suo offre un effetto slide. Ecco un effetto di dissolvenza per la vostra convenienza così:

$(document).ready(function() { 
$('#cpass').click(function() { 
    $('#form2,#form3,#form4').hide(); 
    $('#form1').fadeIn(); 

}); 
$('#cinfo').click(function() { 
    $('#form1,#form3,#form4').hide(); 
    $('#form2').fadeIn(); 

}); 
$('#cmail').click(function() { 
    $('#form4,#form2,#form1').hide(); 
    $('#form3').fadeIn(); 

}); 
$('#cplace').click(function() { 
    $('#form3,#form2,#form1').hide(); 
    $('#form4').fadeIn(); 

}); 
});

Ecco la fiddle per questo.

Se davvero si vuole mantenere la struttura generale del codice qui si va:

$('#cpass').click(function() { 
    $('#form1').collapse('show'); 
    if ($('#form2,#form3,#form4').is(':visible')) $('#form2,#form3,#form4').collapse('hide'); 
}); 

$('#cinfo').click(function() { 
    $('#form2').collapse('show'); 
    if ($('#form1,#form3,#form4').is(':visible')) 
    $('#form1,#form3,#form4').collapse('hide'); 
}); 

$('#cmail').click(function() { 
    $('#form3').collapse('show'); 
    if ($('#form4,#form2,#form1').is(':visible')) 
    $('#form4,#form2,#form1').collapse('hide'); 
}); 

$('#cplace').click(function() { 
    $('#form4').collapse('show'); 
    if ($('#form3,#form2,#form1').is(':visible')) 
    $('#form3,#form2,#form1').collapse('hide'); 
});

Ecco il fiddle.

fonte

2015-04-19 07:48:16

Quando uso hide() nel mio sito Web, il modulo non può essere mostrato, mostra solo un valore – paul0080

Funziona bene con il violino. non funziona per te quindi basta usare la seconda opzione che ho postato. La seconda opzione dovrebbe funzionare per te in base al codice che hai fornito nella tua domanda iniziale. –

Se uso la seconda opzione, posso lavorare solo una volta. – paul0080

Problemi correlati