javascript - 在 jQuery 中使用 .click 时如何设置 src 属性来更改图像

Question

我试图在单击时使用 jquery 更改图像。因此，当我单击一个图像时，它会出现在视口(viewport)上，然后我单击它上面的另一个图像，它会更改为该图像，然后是第三个图像。当我尝试时，它只点击一张图像。

HTML 代码:

<div id="vacationimages">
<p>Click on the Image that best represents the kind of vacation you want</p>
<p><img src="mountain.jpg" alt="Mountain Vacation"><br /><br /></p>
<p><img src="desert.jpg" alt="Desert Vacation"><br /><br /></p>
<p><img src="ocean.jpg" alt="Ocean Vacation"><br /><br /></p>
</div>

<div id="bigimage">
<img id="currentimage" src="ocean.jpg" alt="ocean vacation">
<p id="imagedesc"></p>
</div>

jQuery 代码:

  $("#vacationimages", "src").click(function(){

 $("#firstname").text("");

 $("#bigimage").show("slow");

   var myfirst = $("#firstname").val();

  $("#currentimage").attr("src", "ocean.jpg");

   $("#currentimage").attr("src", "desert.jpg");

尽管我在同一页面上有不同的图像，但仅显示第二张图像。

Answer 1

使用“on”而不是“click”，因为它将适用于动态添加的元素，并在以后为您省去麻烦。之后，它只是用您从单击的图像或 $(this) 收集的图像属性填充图像属性。在您的职能范围内。

$(function() {
  $("#vacationimages img").on("click", function() {
    $("#currentimage").attr("src", $(this).attr("src"));
    $("#imagedesc").html($(this).attr("alt"));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="vacationimages">
<p>Click on the Image that best represents the kind of vacation you want</p>
<img src="http://fillmurray.com/30/30.jpg" alt="Mountain Vacation">
<img src="http://fillmurray.com/32/32.jpg" alt="Desert Vacation">
<img src="http://fillmurray.com/34/34.jpg" alt="Ocean Vacation">
</div>

<div id="bigimage">
<img id="currentimage" src="" alt="">
<p id="imagedesc"></p>
</div>

在这种情况下，另一种常见方法是在 img 周围使用 anchor 标记 ( <a> ) 并填充它的 rel如果您想要单击缩略图来查看更大的图像，则可以使用更大的源图像属性。在这种情况下，您将事件监听器绑定(bind)到 anchor (而不是图像)并将 src 更改为 anchor 的 rel (与 anchor 内的 img 的 src 相反)。