Question

当用户点击他们有图像或颜色的选项时，我试图将图像更改为另一个图像，我在下面有一张图片来显示我想要做的事情这是第二张图片的链接 http://s24.postimg.org/6khgqwwg5/HM10_T_1004_BK_1.jpg http://s4.postimg.org/6ualhzpex/HM10_T_BACKLOGOLESS_BK.jpg

HTML

<div class="container">
<p class="img-main">
<a href="#"   class="overlaybox-img">

<img src="http://coldcoffee.jp/resources/upload/products/thumbnail2/HM10-T-1004-WH.jpg">
</a> </p>
<div id="colorsAndAltContainer">
<ul class="">

    <li class="defaultColor selected">
                    <div class="inner">
                        <div class="description">BLACK</div>
                        <div class="rgbColor" data-color="000000" style="background-color: #000000"></div>
                    </div>
                </li>
                <li>
                    <div class="inner">
                        <div class="description">WHITE</div>
                        <div class="rgbColor" data-color="FFFFFF" style="background-color: #FFFFFF"></div>
                    </div>
                </li>

    <div class="altImages">

   <ul class="alternativeImages">     
   <li class="selected">

        </li>
        <li>
            <img alt="T-Shirt and Jersey" class="alternativeImage"  src="http://s21.postimg.org/ep27oalqr/HM10_T_BACKLOGOLESS_1.jpg" width="54" height="54" >
        </li>
     </ul>
                </div>          

                </ul>
     </div> 
       </div>

的CSS：

.container {
min-height: 565px;
width: 878px;
margin: 0 auto;
padding-top: 220px;
position: relative; 
}

 body{
background-color: #000;
 }
.img-main {
margin-bottom: 10px;
text-align: center;
float: left;
margin-top: 0px;
}
#colorsAndAltContainer {
position: relative;
top: 0;
right: 0;
width: 70px;
height: 300px;
float: left;
margin-left: 6px;
}
.inner {
cursor: pointer;
}
.description {
display: none;
}
.rgbColor {
border: 1px solid #cbcbcb;
width: 13px;
height: 13px;
}
.selectColor {
float: left;
}

.selectColor ul {
float: left;
margin-right: 6px;
}
ul {
list-style: none;
padding: 0;
margin-top: 0px;
}
.altImages {
position: absolute;
width: 70px;
bottom: 0;
right: 0;
}
.alternativeImages {
bottom: 0;
}
.alternativeImages li {
cursor: pointer;
margin-top: 6px;
}
img {
display: block;
}

Answer 1

首先为您的T恤图像指定一个ID：

<img id="t-shirt" alt="T-Shirt and Jersey" class="alternativeImage"  src="http://s21.postimg.org/ep27oalqr/HM10_T_BACKLOGOLESS_1.jpg" width="54" height="54" >

然后在你的黑＆amp;白色按钮使用T恤将更改为的图像的URL指定数据属性：

<div class="inner" data-image-id="http://urltoblackimage.jpg"></div>

然后使用jQuery在点击时更改图像src：

$('div.inner').click(function() {
    var image = $(this).attr('data-image-id');
    $('#t-shirt').attr('src', image);
});

也许给你的div class =“inner”一个更好的触发器名称，带有ID或更具描述性的类名，以避免冲突。

Answer 2

在相关的<a>代码中添加ID，然后使用

进行访问

document.getElementById('idOfTag').setAttribute('href')='someOtherImage.jpg';

这只是javascript函数中的几行。创建按钮或用户点击的任何内容，通过添加onclick="yourFunctionsName()

来监听并执行此功能

不需要jquery！

Answer 3

这是在简单的Javascript中执行此操作的最简单方法。

＆＃13;

function switchImages(){
  if(document.getElementById("mainImage").src != "http://s24.postimg.org/6khgqwwg5/HM10_T_1004_BK_1.jpg") {
    document.getElementById("mainImage").src = "http://s24.postimg.org/6khgqwwg5/HM10_T_1004_BK_1.jpg";
    document.getElementById("smallImage").src = "http://s4.postimg.org/6ualhzpex/HM10_T_BACKLOGOLESS_BK.jpg";
  }else{
    document.getElementById("mainImage").src = "http://coldcoffee.jp/resources/upload/products/thumbnail2/HM10-T-1004-WH.jpg";
    document.getElementById("smallImage").src = "http://s21.postimg.org/ep27oalqr/HM10_T_BACKLOGOLESS_1.jpg";
  }
     
  
}

＆＃13;

.container {
min-height: 565px;
width: 878px;
margin: 0 auto;
padding-top: 220px;
position: relative; 
}

 body{
background-color: #000;
 }
.img-main {
margin-bottom: 10px;
text-align: center;
float: left;
margin-top: 0px;
}
#colorsAndAltContainer {
position: relative;
top: 0;
right: 0;
width: 70px;
height: 300px;
float: left;
margin-left: 6px;
}
.inner {
cursor: pointer;
}
.description {
display: none;
}
.rgbColor {
border: 1px solid #cbcbcb;
width: 13px;
height: 13px;
}
.selectColor {
float: left;
}

.selectColor ul {
float: left;
margin-right: 6px;
}
ul {
list-style: none;
padding: 0;
margin-top: 0px;
}
.altImages {
position: absolute;
width: 70px;
bottom: 0;
right: 0;
}
.alternativeImages {
bottom: 0;
}
.alternativeImages li {
cursor: pointer;
margin-top: 6px;
}
img {
display: block;
}

＆＃13;

<div class="container">
<p class="img-main">
<a href="#"   class="overlaybox-img">

<img id="mainImage" src="http://coldcoffee.jp/resources/upload/products/thumbnail2/HM10-T-1004-WH.jpg">
</a> </p>
<div id="colorsAndAltContainer">
<ul class="">

    <li class="defaultColor selected">
                    <div class="inner">
                        <div class="description">BLACK</div>
                        <div onclick="switchImages();" class="rgbColor" data-color="000000" style="background-color: #000000"></div>
                    </div>
                </li>
                <li>
                    <div class="inner">
                        <div class="description">WHITE</div>
                        <div onclick="switchImages();" class="rgbColor" data-color="FFFFFF" style="background-color: #FFFFFF"></div>
                    </div>
                </li>

    <div class="altImages">

   <ul class="alternativeImages">     
   <li class="selected">

        </li>
        <li>
            <img onclick="switchImage();" id="smallImage" alt="T-Shirt and Jersey" class="alternativeImage"  src="http://s21.postimg.org/ep27oalqr/HM10_T_BACKLOGOLESS_1.jpg" width="54" height="54" >
        </li>
     </ul>
                </div>          

                </ul>
     </div> 
       </div>

＆＃13;

Answer 4

这是一种简单的方法，无需更改现有代码中的任何内容。

<script>
$().ready(function(){
$('#colorsAndAltContainer li').on('click',function()
{

  if($(this).find('.rgbColor').data('color') === "000000") 
  {
       $('a.overlaybox-img img').attr("src","http://s24.postimg.org/6khgqwwg5/HM10_T_1004_BK_1.jpg");
       $('.alternativeImage').attr("src","http://s4.postimg.org/6ualhzpex/HM10_T_BACKLOGOLESS_BK.jpg");
  }   
  else if($(this).find('.rgbColor').data('color') === "FFFFFF") 
  {
    $('a.overlaybox-img img').attr("src","http://coldcoffee.jp/resources/upload/products/thumbnail2/HM10-T-1004-WH.jpg"); 
    $('.alternativeImage').attr("src","http://s21.postimg.org/ep27oalqr/HM10_T_BACKLOGOLESS_1.jpg");
  }  
});

$('.alternativeImage').on('click',function()
{
  var smallImageUrl = $(this).attr("src");
  var mainImageUrl = $(".img-main img").attr("src");
  $(this).attr("src",mainImageUrl);  
  $(".img-main img").attr("src",smallImageUrl);
  $(".img-main img").css("width","300px");
});
});
</script>

工作链接：http://jsfiddle.net/b2c5e19h/5/

将图像更改为另一个图像

4 个答案: