javascript - 单击主图像时显示子图像

Question

我想制作一个切换图像，就像当我点击图像时，子图像会显示类似的东西......这是具有切换功能的图像..

<?php 
  include('../includes/inc.php');
  $user_id =json_decode($user->user_id);
  $albumname='';
  $album = $carousel->get_album($user_id);
  foreach ($album as $key => $myalbum) {
  $albumname = $myalbum['album_name'];

?>
  <div class="portfolio-image">
    <div  class="img-thumbnail img-responsive" style="display: inline-block;vertical-align: top;">
    <img src="../assets/img/gallery/event-image3.jpg" style="display: block;margin: 0 auto; height:150px;width:200px;" data-id="<?php echo $myalbum['album_name']?>">
     <p style="text-align: center;"><strong><?php echo $myalbum['album_name'];?></strong></p>
     </div>&nbsp;&nbsp;
     <p></p>
 </div>
<?php
 }
?>

这就是我的功能所在..

<script type="text/javascript">

    $(document).on('click', 'img[data-id]', function () {
     var selected = $(this).attr('data-id');

     $ss = $('[data-id="' + selected +'"]').next('.picforalbum').toggle();

  });
</script>

这是子图像显示的地方。一旦我点击了图片..

<div class="col-md-12 picforalbum">
 <?php

   include('../includes/inc.php');
   $user_id =json_decode($user->user_id);
   $album = $carousel->get_photoINalbum($albumname,$user_id);
  foreach ($album as $key => $pic) {
 ?>
  <div class="portfolio-image">
    <div  class="img-thumbnail img-responsive" style="display: inline-block;vertical-align: top;">
    <img src="<?php echo $pic['photo'];?>" style="display: block;margin: 0 auto; height:150px;width:200px;" >
    </div>&nbsp;&nbsp;
    <p></p>
  </div>
  <?php    
    }
  ?>

</div>

但问题是当我尝试单击切换图像时没有任何反应...

Answer 1

假设您想要图像的切换功能，我继续构建了一个简单的 JSfiddle . (根据您的网络连接，图片需要一点时间来加载，请在点击图片后等待几秒钟。)

基本上您需要做的是通过 onclick() 在您的图像上调用一个函数来更改 srcimg 标签的 strong> 属性。因此，如果您维护一个 bool 变量，您可以轻松地在 true 和 false 之间切换以更改您的图像。因此，对于 true，您将拥有 link1，对于 false，您将拥有 link2。

编辑: 既然您说过图像应该作为“子”图像的切换开关，我已经编辑了代码，其中图像作为旁边另一个图像的切换开关。查看updated fiddle和下面的代码片段。

这是一个简单的例子。

var toggle = false;

function toggle_img() {
  if (toggle) {
    document.getElementById("toggle_image").style.opacity = 0;
    toggle = false;
  } else {
    document.getElementById("toggle_image").style.opacity = 1;
    toggle = true;
  }
}

<img id="toggle" src="https://s19.postimg.org/an381cz4j/470766057_3f1e9a3933_b.jpg" alt="jungle" width="75vw" height="50vw" onclick="toggle_img()" />

<img id="toggle_image" src="https://s19.postimg.org/klo6nu8k3/sumatrantiger-002.jpg" alt="tiger" width="75vw" height="50vw" onclick="toggle_img()" style="opacity:0"/>