在一个 div 内的一系列图像上单独使用 show hide答案

【问题标题】：Using show hide individually on a series of images within one div在一个 div 内的一系列图像上单独使用 show hide
【发布时间】：2010-12-10 07:01:30
【问题描述】：

我是 JQuery 的菜鸟，我的任务是完成一个超出我能力范围的项目。

我有一系列图像，每个图像都在它自己的 div 中，并带有一个相关的隐藏段落。我可以使用简单的显示/隐藏脚本从第一个 div 中获取段落以正确显示和隐藏，但是一旦我将更多图像 div 添加到组合中，代码要么只打开第一个图像的<P>，要么打开所有<P>s一次。

很明显，我需要帮助集成一个等效的 EACH 循环。

代码如下：

    <script>
  $(document).ready(function(){

    $("#showr").click(function () {
      $("p:eq(0)").show("slow", function () {
        // use callee so don't have to name the function
        $(this).next().show("slow", arguments.callee); 
      });
    });
    $("#hidr").click(function () {
      $("p").hide(2000);
    });

  });
  </script>
  <style>
  div { padding:0; float:left; position:relative; top: 140px; text-align:center}
  p { background:#FFFFFF; margin:3px; width:300px; 
        display:none; position:absolute; left:45%; top: -20px; text-align:left; z-index: 3000;  }
 .over  { z-index: 3000; }
  </style>
</head>
<body>
 <div id="belt">
  <div class="panel"><img src="images/1.jpg" name="showr" id="showr"> 
    <p><img id="hidr" class="over" src="images/1.jpg" width="300px" height="450px" alt="light1" /> <br />
        <br />
        Display item text description<br />
       $price</p></div>

        <div class="panel">
        <img id="showr" src="images/2.jpg" width="200px" height="300px" alt="light1" />
    <p><img id="hidr" class="over" src="images/1.jpg" width="300px" height="450px" alt="light1" /> <br />
        <br />
        Display item text description<br />
       $price</p></div>
    </div>
    </body>
    </html>

【问题讨论】：

标签： jquery hide show each show-hide

【解决方案1】：

试试这个：

<script>
  $(document).ready(function(){
    $("img.showr").click(function () {
       $(this).next('p').show("slow");
    });
    $("img.hidr").click(function () {
      $(this).parent('p').hide(2000);
    });

  });
  </script>
<style>
div {
    padding:0;
    float:left;
    position:relative;
    top: 140px;
    text-align:center
}
p {
    background:#FFFFFF;
    margin:3px;
    width:300px;
    display:none;
    position:absolute;
    left:45%;
    top: -20px;
    text-align:left;
    z-index: 3000;
}
.over {
    z-index: 3000;
}
</style>
</head><body>
    <div id="belt">
        <div class="panel">
            <img src="images/1.jpg" name="showr" class="showr">
            <p>
                <img class="hidr over" src="images/1.jpg" width="300px" height="450px" alt="light1" /> <br />
                <br />
                Display item text description<br />
                $price
            </p>
        </div>
        <div class="panel"> 
            <img class="showr" src="images/2.jpg" width="200px" height="300px" alt="light1" />
            <p>
                <img class="hidr over" src="images/1.jpg" width="300px" height="450px" alt="light1" /> <br />
                <br />
                Display item text description<br />
                $price
            </p>
        </div>
    </div>
</body>
</html>

注意：我也更改了一些 jQuery 和标记。询问您是否需要任何帮助，否则会中断:)

【讨论】：

看起来它应该可以工作，但可惜它没有。我的图像现在只是坐在那里——即使是系列中的第一个也不起作用。我担心我在翻译中搞砸了。会再努力一点，看看我能不能把它解决掉。谢谢！