Использование show hide индивидуально для серии изображений в пределах одного div - PullRequest
Новая
       33

Использование show hide индивидуально для серии изображений в пределах одного div

0 голосов
/ 27 октября 2009

Я абсолютный новичок в JQuery, и мне было поручено завершить проект вне моих возможностей.

У меня есть серия изображений, каждое в своем собственном div со связанным скрытым абзацем. Я могу использовать простой скрипт show / hide, чтобы получить абзац из первого div для правильного отображения и скрытия, но как только я добавляю больше div изображений для микса, код открывает только первое изображение <P> или все <P>s сразу.

СРОЧНО, мне нужна помощь в интеграции КАЖДОГО цикла, эквивалентного.

Вот код: 

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

1 Ответ

0 голосов
/ 27 октября 2009

Попробуйте это: 

<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 и разметку. Спросите, нужна ли вам какая-либо помощь, или она сломается:)

...