0

我对 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>
4

1 回答 1

0

尝试这个：

<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 和标记。询问您是否需要任何帮助，否则会中断:)

于 2009-10-26T22:16:51.453 回答