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

时间：2018-02-28 15:54:28

标签： javascript jquery html

我有一个带有主图像的图片库，下面有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);
    }
});

对此的任何帮助将不胜感激。

// ----------------------------- EDIT --------------- ----------- \

我的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>

2 个答案:

答案 0 :(得分：0)

您使用的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>

答案 1 :(得分：0)

好的，我通过查看https://stackoverflow.com/a/15353226

找出了解决这个问题的方法

这是我的更新代码，如果到达图像的末尾，则允许循环回到开头：

我仍然没有弄清楚为什么会发生这种情况或造成这种情况的原因，但这有效。

我遗漏了CSS和mouseover / mouseout的内容，所以它只是基本的图片库。

$("#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").unbind("click").bind("click", function(){
		var curImageID = $("#product_main_image img").attr('data-id');
		curImageID--;
		if(curImageID == 0){
			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);
	});
	
	$("#image_right").unbind("click").bind("click", function(){
		var curImageID = $("#product_main_image img").attr('data-id');
		curImageID++;
		if(curImageID > $('#product_thumbnail img').length){
			curImageID = 1;
		}
		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);
	});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.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>

相关问题
最新问题