javascript - 图片库功能似乎被调用了两次

我有一个包含主图像和5个缩略图的图像库，当您单击缩略图时，图像会发生变化，效果很好，但我也在两侧各放了两个箭头，以使图像也可以滚动浏览的作品，但它跳过第二个图像。我尝试放入警报以查看发生了什么，并且它们被发射了两次。

我的HTML如下:

<tr id="product_main_image">
    <td colspan="5">
        <img src="product_images/catalog.png" id="1">
        <span id="image_left" style="bottom: 233px;"><img src="web/left_arrow.png"></span>
        <span id="image_right" style="bottom: 233px;"><img src="web/right_arrow.png"></span>
    </td>
</tr>

<tr id="product_thumbnail">
    <td><img src="product_images/catalog.png" id="1"></td>
    <td><img src="product_images/config.png" id="2"></td>
    <td><img src="product_images/customers.png" id="3"></td>
    <td><img src="product_images/marketing.png" id="4"></td>
    <td><img src="product_images/sales.png" id="5"></td>
</tr>

我的JS如下:

$("#product_thumbnail img").on({
    mouseover: function(){
        $(this).css({'cursor': 'pointer'});
    },
    mouseout: function(){
        $(this).css({'cursor': 'default'});
    },
    click: function(){
        var imageURL = $(this).attr('src');
        var imageID = $(this).attr('id');
        $("#product_main_image > td > img").attr('src', imageURL);
        $("#product_main_image > td > img").attr('id', imageID);
    }
});

$("#image_left").on({
    mouseover: function(){
        $(this).css({'cursor': 'pointer'});
    },
    mouseout: function(){
        $(this).css({'cursor': 'default'});
    },
    click: function(){
        var curImageID = $("#product_main_image img").attr('id');
        curImageID--;
        var imageURL = $("#"+curImageID).attr('src');
        alert (imageURL);
        $("#product_main_image > td > img").attr('src', imageURL);
        $("#product_main_image > td > img").attr('id', curImageID);
    }
});

$("#image_right").on({
    mouseover: function(){
        $(this).css({'cursor': 'pointer'});
    },
    mouseout: function(){
        $(this).css({'cursor': 'default'});
    },
    click: function(){
        var curImageID = $("#product_main_image img").attr('id');
        curImageID++;
        var imageURL = $("#"+curImageID).attr('src');
        alert (imageURL);
        $("#product_main_image > td > img").attr('src', imageURL);
        $("#product_main_image > td > img").attr('id', curImageID);
    }
});

任何帮助，将不胜感激。

// - - - - - - - - - - - - - - -编辑 - - - - - - - - - -------- \

我的HTML是如何从php生成的

$sql = mysqli_query($con, "SELECT * FROM product_images WHERE product='$product_id'");
$imageCount = mysqli_num_rows($sql);
if ($imageCount > 0) {
    $i = 0;
    while($row = mysqli_fetch_array($sql)){
        $image = $row["image"];
        $i++;
        $gallery .= "<td><img src='product_images/$image' data-id='$i'></td>";
    }
}
$sql = mysqli_query($con, "SELECT * FROM product_images WHERE product='$product_id' LIMIT 1");
$imageCount = mysqli_num_rows($sql);
if ($imageCount > 0) {
    while($row = mysqli_fetch_array($sql)){
        $first_image = $row['image'];
        $main_image .= "<img src='product_images/$first_image' data-id='1'>";
    }
}

我的实际HTML

<table id="gallery">
    <tr id="product_main_image">
    <td colspan='5'>
    <?php echo $main_image; ?>
    <span id="image_left"><img src="web/left_arrow.png"></span>
    <span id="image_right"><img src="web/right_arrow.png"></span>
    </td>
    </tr>
    <tr id="product_thumbnail">
    <?php echo $gallery; ?>
    </tr>
</table>

最佳答案

您使用的不是唯一的id。他们应该是。

而是使用data-id。

这是一个解决方案:

$("#product_thumbnail img").on({
  click: function() {
    var imageURL = $(this).attr('src');
    var imageID = $(this).attr('data-id');
    $("#product_main_image > td > img").attr('src', imageURL);
    $("#product_main_image > td > img").attr('data-id', imageID);
  }
});

$("#image_left").on({
  click: function() {
    var curImageID = $("#product_main_image img").attr('data-id');
    curImageID--;
    if( curImageID > 0) {
      var imageURL = $("#product_thumbnail img[data-id=" + curImageID + "]").attr('src');
      $("#product_main_image > td > img").attr('src', imageURL);
      $("#product_main_image > td > img").attr('data-id', curImageID);
    }
  }
});

$("#image_right").on({
  click: function() {
    var curImageID = $("#product_main_image img").attr('data-id');
    curImageID++;
    if( curImageID <= $('#product_thumbnail img').length) {
      var imageURL = $("#product_thumbnail img[data-id=" + curImageID + "]").attr('src');
      $("#product_main_image > td > img").attr('src', imageURL);
      $("#product_main_image > td > img").attr('data-id', curImageID);
    }
  }
});

#product_thumbnail img:hover,
#image_left,
#image_right{
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr id="product_main_image">
  <td colspan="5">
    <img src="http://via.placeholder.com/100x100" data-id="1"><br />
    <span id="image_left" style="bottom: 233px;">
      <!--img src="web/left_arrow.png"-->
      left
    </span>
    <span id="image_right" style="bottom: 233px;">
      <!--img src="web/right_arrow.png"-->
      right
    </span>
  </td>
</tr>

<tr id="product_thumbnail">
  <td><img src="http://via.placeholder.com/100x100" data-id="1"></td>
  <td><img src="http://via.placeholder.com/110x100" data-id="2"></td>
  <td><img src="http://via.placeholder.com/120x100" data-id="3"></td>
  <td><img src="http://via.placeholder.com/130x100" data-id="4"></td>
  <td><img src="http://via.placeholder.com/140x100" data-id="5"></td>
</tr>
</table>