在一个 div 内的一系列图像上单独使用显示隐藏

发布于 2024-08-09 04:20:01 字数 1728 浏览 9 评论 0原文

我对 JQuery 完全是个菜鸟，而且我的任务是完成一个超出我能力的项目。

我有一系列图像，每个图像都有自己的 div 以及关联的隐藏段落。我可以使用简单的显示/隐藏脚本来正确显示和隐藏第一个 div 中的段落，但是一旦我添加更多图像 div 到混合中，代码要么只打开第一个图像的

或所有

一次。

显然，我需要帮助集成 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>

原文

I'm a total noob to JQuery, and I've been tasked with finishing a project beyond my ability.

I've got a series of images each in it's own div with an associated hidden paragraph. I can use simple show/hide script to get the paragraph from the first div to show and hide properly, but once I add more image divs to the mix, the code either opens only the first image's <P> or all the <P>s at once.

CLearly, I need help integrating an EACH loop equivalent.

Here's the code:

    <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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

无悔心 2024-08-16 04:20:01

试试这个：

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

Try this:

<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>

NOTE: I've change some jQuery and markup too. Ask if you need any help, or it breaks :)

回复收藏 0 原文

~没有更多了~