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进行演示和视频会议。

Answer 2

您正在使用menuDiv两次，并且您想显示它们的隐藏内容。但是当你在一个页面中多次使用相同的id时，jquery会从顶部开始考虑第一个id，并且它会将所有jquery代码与该第一个元素的id附加在一起。

要解决您的问题，如果您将id属性更改为class，它应该有效。

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”）。on for my button，现在它们工作正常！

感谢大家！

无法再单击我的按钮一次

3 个答案: