尝试使用单击事件制作图像标签库

Question

W3Schools 有一个 example 我用来制作图片标签库。

他们使用纯 JS 的示例，我正在尝试使用 jQuery。我是使用 jQuery 的新手，但我有一个功能似乎可以在控制台中抓取图像，但所选图像不会出现在 ID 为 #expandedImg 的 img 元素中。

我似乎无法弄清楚什么是错误的，或者为什么它不会呈现我单击的图像。我将不胜感激任何指导。谢谢。

$(document).ready(function() {
    $(".column img").click(function() {
      var newclass = $(this).attr("src");
      console.log(newclass);
      var oldclass = $("#expandedImg").attr("id");
      console.log(oldclass);

      $("#expandedImg").fadeOut(function() {
        $("#expandedImg").removeClass(oldclass).addClass(newclass).fadeIn("slow");
        console.log(newclass);
      });
    });
  });

/* The grid: Four equal columns that floats next to each other */

.column {
  float: left;
  width: 20%;
  padding: 10px;
}


/* Style the images inside the grid */

.column img {
  opacity: 0.8;
  cursor: pointer;
}

.column img:hover {
  opacity: 1;
}


/* Clear floats after the columns */

.row:after {
  content: "";
  display: table;
  clear: both;
}


/* The expanding image container */

.container {
  position: relative;
  display: none;
  width: 50%;
}


/* Closable button inside the expanded image */

.closebtn {
  position: absolute;
  top: 10px;
  right: 15px;
  color: white;
  font-size: 35px;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Image Gallery</title>
  <link rel="stylesheet" type="text/css" href="styles.css" />
  <link href="../jquery-ui/jquery-ui.min.css" rel="stylesheet" type="text/css" />
  <script src="../jquery-ui/external/jquery/jquery.js" type="text/javascript"></script>
  <script src="../jquery-ui/jquery-ui.min.js" type="text/javascript"></script>
</head>

<body>
  <!-- The four columns -->
  <div class="row">
    <div class="column">
      <img src="../images/trees_mountains.jpg" alt="Nature" style="width:100%">
    </div>
    <div class="column">
      <img src="../images/snow_mountains.jpg" alt="Snow" style="width:100%">
    </div>
    <div class="column">
      <img src="../images/mountain_landscape.jpg" alt="Mountains" style="width:100%">
    </div>
    <div class="column">
      <img src="../images/skylights.jpg" alt="Lights" style="width:100%">
    </div>
  </div>

  <div class="container">
    <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
    <img id="expandedImg" style="width:100%" />
  </div>
</body>

</html>

Answer 1

你的整个容器里面有图片在 CSS 中用 display: none 隐藏：

.container {
  position: relative;
  display: none;
  width: 50%;
}

您需要先显示它：

$(".container").show()

您还使用removeClass 和addClass 添加新的图像源。 removeClass 和 addClass 仅用于添加和删除 CSS 类，仅此而已。

您存储在newclass 和oldclass 中的数据不是CSS 类，它们是具有值的变量，在newclass 的情况下值是图像的来源，您只是按名称调用变量newclass。

您需要以与获取它们相同的方式添加源并用变量中的值填充它：

$("#expandedImg").attr('src', newclass)

$(document).ready(function() {
  $(".column img").click(function() {
    console.clear();
    var newclass = $(this).attr("src");
    console.log(newclass);
    var oldclass = $("#expandedImg").attr("id");
    console.log(oldclass);

    $(".container").show();
    // show .container

    $("#expandedImg").attr('src', newclass).hide().fadeIn("slow");
    //set new source and hide element in order to be able to fade it in again
    // fade in works only on hidden elements

  });
});

/* The grid: Four equal columns that floats next to each other */

.column {
  float: left;
  width: 20%;
  padding: 10px;
}


/* Style the images inside the grid */

.column img {
  opacity: 0.8;
  cursor: pointer;
}

.column img:hover {
  opacity: 1;
}


/* Clear floats after the columns */

.row:after {
  content: "";
  display: table;
  clear: both;
}


/* The expanding image container */

.container {
  position: relative;
  display: none;
  width: 50%;
}


/* Closable button inside the expanded image */

.closebtn {
  position: absolute;
  top: 10px;
  right: 15px;
  color: white;
  font-size: 35px;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Image Gallery</title>
  <link rel="stylesheet" type="text/css" href="styles.css" />
  <link href="../jquery-ui/jquery-ui.min.css" rel="stylesheet" type="text/css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <script src="../jquery-ui/jquery-ui.min.js" type="text/javascript"></script>
</head>

<body>
  <!-- The four columns -->
  <div class="row">
    <div class="column">
      <img src="https://pmcvariety.files.wordpress.com/2019/12/baby-yoda-plush-toy-mattel-the-mandalorian.png?w=1000&h=563&crop=1" alt="Nature" style="width:100%">
    </div>
    <div class="column">
      <img src="https://i.kinja-img.com/gawker-media/image/upload/t_original/oicrsr3wwqi6u3buvvxx.jpg" alt="Snow" style="width:100%">
    </div>
    <div class="column">
      <img src="https://images2.minutemediacdn.com/image/upload/c_crop,h_1224,w_2177,x_80,y_0/f_auto,q_auto,w_1100/v1574876645/shape/mentalfloss/609512-disney_0.jpg" alt="Mountains" style="width:100%">
    </div>
    <div class="column">
      <img src="https://static1.srcdn.com/wordpress/wp-content/uploads/2019/12/Baby-Yoda-in-The-Mandalorian-Chapter-4.jpg" alt="Lights" style="width:100%">
    </div>
  </div>

  <div class="container">
    <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
    <img id="expandedImg" style="width:100%" />
  </div>
</body>

</html>