Question

我需要一些.toogle功能的帮助：我的问题是我需要通过点击两个不同的按钮来执行相同的操作; 这是我的HTML代码：

<div id="popup_prova">
    <div id="contentElencoProva">
    <span>Elenco Prove:</span>
    <form action="responseregistrodocente" method="post">
    <ul id="elencoProve">
<li><input type="radio" name="provaSelected" value="3" checked> <span>Id prova: 3 tipo [scritto/orale]: O conoscenza: Esame</span></li>
<li><input type="radio" name="provaSelected" value="4"> <span>Id prova: 4 tipo [scritto/orale]: O conoscenza: Esame</span></li>
</ul><p class="submitProve"><button type="button" name="creaProva">Crea Prova</button><button type="button" name="modificaProva">Mostra/Nascondi Dettagli Prova</button> <button type="button" name="eliminaProva">Elimina Prova</button>
</p><p class="infoVoto"><span id="info_Voto"></span>
<span><input type="text" name="voto"></span></p>
<p class="submitVoto"><input type="submit" name="modificaVoto" value="Modifica Voto"> <input type="submit" name="eliminaVoto" value="Elimina Voto"></p> </form>
    </div>
<div id="gestioneProva">
<span id="titleProva"></span>
<form id="f_creaProva" action="">
<table>
<tr>
    <td>Scegli il tipo di prova: 
    <select name="s_creaProva">
    <option label="Scritto" value="S"></option>
    <option label="Orale" selected value="O"></option>
    </select>
    </td>
</tr>
<tr>
    <td>Scrivi i requisiti degli studenti [max 80 caratteri]<span id="counter1"></span></td>
</tr>
<tr>
    <td colspan="2"><textarea id="requisiti" rows="4" cols="35"></textarea></td>    
</tr>
<tr>
    <td>Scrivi le abilit&agrave; degli studenti [max 80 caratteri]<span id="counter2"></span></td>
</tr>
<tr>
<td colspan="2" ><textarea id="abilita"  rows="4" cols="35"></textarea></td>    
</tr>
<tr>
    <td><input type="submit" value="Invia"><input type="reset" name="resettaProva" value="Cancella"></td>
</tr>
</table>
</form>
</div>
</div>


</div>

</div>

这是我的javascript代码：

<script type="text/javascript">
$(document).ready(function() {


    //CREA PROVA VISUALIZZA IL CAMPO PER CREARE UNA NUOVA PROVA CHE ESISTE SEMPRE

    $("button[name='creaProva']").on("click",function(event){
        $("input[name='resettaProva']").trigger('click');
        $("#titleProva").html("Creazione di una nuova Prova");
        $("#gestioneProva").slideToggle();
        event.stopPropagation();
    });
    //MODIFICA e NASCONDI LE INFORMAZIONI DI UNA PROVA
    //.on scatena l'evento ogni qual volta esiste il pulsante in maniera dinamica anche se il pulsante non esiste ancora
    $("button[name='modificaProva']").on("click",function(){
        $("#titleProva").html("Prova attualmente selezionata: <input type=\"text\" name=\"idProva\" value=\""+$("input[name='provaSelected']:checked").val()+"\"readonly>");
        $("#gestioneProva").slideToggle();
        event.stopPropagation();
        });
    $("input[name='provaSelected']").on("change",function(){
        $("#gestioneProva").hide();
        event.stopPropagation();
        });



});
</script>

现在当我点击按钮“creaProva”.slidetoggle（）工作正常并向我显示“div gestioneProva”但是当我点击按钮modificaProva时它不起作用。

在我的CSS中我也只在div gestioneProva上显示了

很多寻求帮助!!!

Answer 1

您在此行中缺少事件参数：

$("button[name='modificaProva']").on("click",function(){

将其更改为：

$("button[name='modificaProva']").on("click",function(event){

slideToggle功能

1 个答案: