ここに私のJavaScriptに問題があります。 まず、画像をクリックすると、画像がズームされます。問題は、画像を別の画像に変更してクリックしても、新しい画像ではなく最初の画像がズームされることです。
私のhtml（画像を表示してズームするためのコンテナー）
<div class="col-md-8">
<span id="ex3" class="zoom">
<img class="img-responsive" id="myImage" width="750" height="550" src="/images/<?php echo "./image/product/p1/". $row["item_image"]. ".jpg"; ?>">
</span>
</div>
私のhtml（クリックしてズームしたい次の画像）
<div class="col-sm-3 col-xs-6">
<a href="#">
<img class="img-responsive portfolio-item subimage" onclick="changeImage1(); <?php $show1="./image/product/p1/". $row["item_image"]. ".jpg"; ?>" src="/images/<?php echo "./image/product/p1/". $row["item_image"]. ".jpg"; ?>" alt="">
</a>
</div>
bodyタグ内のJavascript
function changeImage1() {
var image = document.getElementById("myImage");
var submage = document.getElementsByClassName("subimage")[1].src;
image.src= submage;
}
headタグ内のJavaScript（ズーム機能）
jQuery(document).ready(function($){
$("#ex3").zoom({ on:"click" });
});
それを修正する方法、アイデアはありますか？ありがとう。
回答：
回答№1は1次の画像にid = "ex3"がありません。ズームhtmlをクリックします。 次のようにしてみてください：
jQuery(document).ready(function($){
$("img").zoom({ on:"click" });
});