通过单击图像隐藏和显示 div答案

【问题标题】：Hiding and showing divs by clicking image通过单击图像隐藏和显示 div
【发布时间】：2013-03-04 16:56:00
【问题描述】：

我正在尝试根据单击的图像显示和隐藏 div，因此当您单击餐厅图像时，它会显示名为成员窗口的 div。我得到的错误是Uncaught SyntaxError: Unexpected token {。

这是一个单独的 JavaScript 文件中的脚本

 $(document).ready(resteraunt(){

    $('people').click(function(){
    $("memberswindow").show();

    });

    });

这里是 HTML

 <!DOCTYPE html>

   <html>

   <head> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
       <script src="Wolfeboro_Connection/Scripts/homepage.js"></script>
       <script src="Wolfeboro_Connection/Scripts/menu.js"></script>

   <link rel='stylesheet' href='Wolfeboro_Connection/CSS/index.css'> 


   </head>

   <body>



   <img src="Wolfeboro_Connection/wc.png" id="wc">

   <a href='' onclick='resteraunt();'><img src='Wolfeboro_Connection/resteraunt.jpg'        
   id="resteraunt"></a>
   <a href='' onclick='map();'><img src='Wolfeboro_Connection/map.jpg' id="map"></a>
   <a href='' onclick='mail();'><img src='Wolfeboro_Connection/mail.jpg' id="mail"></a>
   <a href='' onclick='people();'><img src='Wolfeboro_Connection/people.jpg' id="people"></a>

   <div id="window"> <div id="memberswindow"> <input type="text" id="username"   
   placeholder="Username">

   <input type="text" id="loginpassword" placeholder="Password">

   <input type="text" id="email" placeholder="Email"> </div> </div>

   <div id="banner"> <h1> Wolfeboro Connection </h1> </div>









   </body>

   </html>

【问题讨论】：

您的 jQuery 选择器缺少 id 哈希。
只需查看右侧的“相关”答案列，这显然是一个重复的问题。
您传递给ready() 方法的函数是匿名函数，而不是命名函数，它应该包含在匿名函数中。
Show one div while hiding other divs with jquery when clicking on links 的可能重复项只需将“图像”一词替换为“链接”
restaurant 不是拼写为 resteraunt。对不起，我不得不

标签： javascript jquery onclick show-hide

【解决方案1】：

您不可能为不同的变体创建方法。想象一下，当您必须为 100 种不同的场景显示 div 时？

可以采用通用方法。

为每个实体创建 rel/class 属性

<div id="ListenAllClick">
  <a href="#"><img src="mysrx" rel="divIdToShow"/></a>
  <a href="#"></a>
</div>

获取所有锚点点击事件

$(function() {  // equivalent to $(document).ready(function(){});

   $("a").on("click", function(eV) { 

      /* for better performance use 
          $("#ListenAllClick").on("click", "a", function() {});
          instead of 
          $("a").on("click", function() { 
      */
      eV.preventDefault();
      $("#" + $(this).attr("rel"/*"class"*/)).show();
   });
});

【讨论】：

我看起来不是很复杂

【解决方案2】：

jquery 要求您通过表示符号“.”来声明目标元素是“类”还是“id”。和“#”分别

试试这个：

$("#people").click(function(){
  $("#memberswindow").show();
});

您用于 document.ready() 调用的语法也不正确，请尝试将其作为完整解决方案：

$(document).ready(function(){
    $("#people").click(function(){
      $("#memberswindow").show();
    });
});

【讨论】：

问题是您正在调用您的 div 的 onclick="" 属性，这完全没有必要......您可以删除图像周围的锚（链接）标签。 jquery 将单击绑定到图像元素，因此没有理由在其周围放置另一个 html 链接
您可以完全删除标签。当您使用 jQuery 将点击事件绑定到元素时，不需要它们
非常感谢 jquery api 我应该查看 .bind 和 .click 事件