無法再單擊我的按鈕一次

Question

我只是在手邊說我對jQuery不太好，我剛剛開始學習它。我正在嘗試製作交互式指南，底部的菜單在指南中保留。唯一的問題是那些輸入不能被點擊一次以上，當你切換頁面時，它們仍然不能被點擊。

我知道這可能是基本的，但我仍然在學習。提前致謝！

$("#menuDiv").on("click", "#menuPresentation", function() { 
 
    $(".videoconference").hide(); 
 
    $(".audioconference").hide(); 
 
    $(".presentation").fadeIn("slow"); 
 
}); 
 

 
$("#menuVideoconference").click(function() { 
 
    $(".presentation").hide(); 
 
    $(".audioconference").hide(); 
 
    $(".videoconference").fadeIn("slow"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="presentation"> 
 
    <div id="menuDiv"> 
 
    <img src="img/menu/fond.png" alt="Menu." id="menu"> 
 
    <input type="image" src="img/menu/fermeture.png" title="Ferme les appareils en marche et revient à l'écran de début." alt="Bouton de fermeture." class="masterTooltip" id="menuFermeture"> 
 
    <input type="image" src="img/menu/presentation.png" title="Vous êtes déjà sur cette option." alt="Bouton présentation." class="masterTooltip" id="menuPresentation"> 
 
    <input type="image" src="img/menu/videoconference.png" title="Permet de changer la méthode de diffusion vers la vidéoconférence." alt="Bouton vidéoconférence." class="masterTooltip" id="menuVideoconference"> 
 
    <input type="image" src="img/menu/audioconference.png" title="Permet de changer la méthode de diffusion vers l'audioconférence." alt="Bouton audioconférence." class="masterTooltip" id="menuAudioconference"> 
 
    <img src="img/menu/micro.png" title="Active ou désactive les microphones." alt="Bouton microphone." class="masterTooltip" id="menuMicro"> 
 
    <img src="img/menu/mute.png" title="Enlève le son complétement." alt="Bouton volume mute." class="masterTooltip" id="menuMute"> 
 
    <img src="img/menu/moins.png" title="Descend le son." alt="Bouton volume moins." class="masterTooltip" id="menuMoins"> 
 
    <img src="img/menu/plus.png" title="Monte le son." alt="Bouton volume plus." class="masterTooltip" id="menuPlus"> 
 
    </div> 
 
</div> 
 
<div class="videoconference"> 
 
    <div id="menuDiv"> 
 
    <img src="img/menu/fond.png" alt="Menu." id="menu"> 
 
    <input type="image" src="img/menu/fermeture.png" title="Ferme les appareils en marche et revient à l'écran de début." alt="Bouton de fermeture." class="masterTooltip" id="menuFermeture"> 
 
    <input type="image" src="img/menu/presentation.png" title="Permet de changer la méthode de diffusion vers le partage de contenu." alt="Bouton présentation." class="masterTooltip" id="menuPresentation"> 
 
    <input type="image" src="img/menu/videoconference.png" title="Vous êtes déjà sur cette option." alt="Bouton vidéoconférence." class="masterTooltip" id="menuVideoconference"> 
 
    <input type="image" src="img/menu/audioconference.png" title="Permet de changer la méthode de diffusion vers l'audioconférence." alt="Bouton audioconférence." class="masterTooltip" id="menuAudioconference"> 
 
    <img src="img/menu/micro.png" title="Active ou désactive les microphones." alt="Bouton microphone." class="masterTooltip" id="menuMicro"> 
 
    <img src="img/menu/mute.png" title="Enlève le son complétement." alt="Bouton volume mute." class="masterTooltip" id="menuMute"> 
 
    <img src="img/menu/moins.png" title="Descend le son." alt="Bouton volume moins." class="masterTooltip" id="menuMoins"> 
 
    <img src="img/menu/plus.png" title="Monte le son." alt="Bouton volume plus." class="masterTooltip" id="menuPlus"> 
 
    </div> 
 
</div>

Answer 1

您正在使用menuDiv兩次，並且您想顯示它們的隱藏內容。但是當你在一個頁面中多次使用相同的id時，jquery會考慮從頂部開始的第一個，它會將所有jQuery代碼與該第一個元素的id相關聯。

要解決您的問題，如果您將id屬性更改爲class它應該工作。

Answer 2

您正在使用menuDiv ID爲這兩個演示以及爲視頻會議。

Answer 3

我改變了一下我的代碼，所以更容易使菜單在每個頁面上顯示而不重複我的HTML 3次。

<div class="pageCrestron"> 
    <img src="img/salle2/fond.png" alt="Salle avec table et chaises."> 
    <img src="img/salle2/ecran.png" alt="Écran Crestron." id="ecranCrestron"> 
    <img src="img/menu/fond.png" alt="Menu." id="menu"> 
    <input type="image" src="img/menu/fermeture.png" title="Ferme les appareils en marche et revient à l'écran de début." alt="Bouton de fermeture." class="masterTooltip" id="menuFermeture"> 
    <input type="image" src="img/menu/presentation.png" title="Permet de changer la méthode de diffusion vers le partage de contenu." alt="Bouton présentation." class="masterTooltip" id="menuPresentation"> 
    <input type="image" src="img/menu/videoconference.png" title="Permet de changer la méthode de diffusion vers la vidéoconférence." alt="Bouton vidéoconférence." class="masterTooltip" id="menuVideoconference"> 
    <input type="image" src="img/menu/audioconference.png" title="Permet de changer la méthode de diffusion vers l'audioconférence." alt="Bouton audioconférence." class="masterTooltip" id="menuAudioconference"> 
    <img src="img/menu/micro.png" title="Active ou désactive les microphones." alt="Bouton microphone." class="masterTooltip" id="menuMicro"> 
    <img src="img/menu/mute.png" title="Enlève le son complétement." alt="Bouton volume mute." class="masterTooltip" id="menuMute"> 
    <img src="img/menu/moins.png" title="Descend le son." alt="Bouton volume moins." class="masterTooltip" id="menuMoins"> 
    <img src="img/menu/plus.png" title="Monte le son." alt="Bouton volume plus." class="masterTooltip" id="menuPlus"> 
    <div class="presentation"> 
     <h2 id="presentationTitle">Points de branchement</h2> 
     <img src="img/presentation/boitier1.png" title="Permet de sélectionner le boitier 1. Le bleu signifie qu'il est présentement sélectionné." alt="Boitier de table." class="masterTooltip" id="boitiertable1"> 
     <img src="img/presentation/boitier2.png" title="Permet de sélectionner le boitier 2. Le gris signifie qu'il n'est présentement pas sélectionné." alt="Boitier de table." class="masterTooltip" id="boitiertable2"> 
     <img src="img/presentation/aucunsignal.png" title="Indique les possibles périphériques connectés." alt="Aucun signal détecté." class="masterTooltip" id="signal1"> 
     <img src="img/presentation/aucunsignal.png" title="Indique les possibles périphériques connectés." alt="Aucun signal détecté." class="masterTooltip" id="signal2"> 
    </div> 
    <div class="videoconference"> 

    </div> 
    <div class="audioconference"> 

    </div> 
</div> 

它現在更有意義了。正如評論中所建議的那樣，我使用$（「body」）作爲我的按鈕，現在它們工作正常！

感謝大家！