我需要一些.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à 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上显示了
很多寻求帮助!!!
答案 0 :(得分:0)
您在此行中缺少事件参数:
$("button[name='modificaProva']").on("click",function(){
将其更改为:
$("button[name='modificaProva']").on("click",function(event){