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 に答える