当我仅声明了一个data-*
属性时,该函数运行良好,但是如果我的product(product-image)具有多个data-*
属性,则该函数无法正常工作,换句话说,产品图像未显示,它生成错误的.src
。
总共我有10种图像组合(2种颜色,每种都有5种不同的形状)。
我是javascript / jquery新手。因此,非常感谢您的帮助。
<div class="container">
<h2>Product Page</h2>
<div class="product-view">
<img id="myimg" src="img/square_orange_img.jpg" width="372" height="511">
</div>
<div class="options">
<p>Choose a Color:</p>
<ul>
<li><img class="colorbox" data-color="orange" style="background-color:orange;" onclick="changecolor(this)" alt=""></li>
<li><img class="colorbox" data-color="purple" style="background-color:purple;" onclick="changecolor(this)" alt=""></li>
</ul>
<p>Select Shape:</p>
<ul>
<li><img class="shapes" data-shape="square" src="img/square-vertical.png" width="50" height="69" onclick="changeshape(this)" alt=""></li>
<li><img class="shapes" data-shape="round" src="img/round-vertical.png" width="50" height="69" onclick="changeshape(this)" alt=""></li>
<li><img class="shapes" data-shape="classic" src="img/classic-vertical.png" width="50" height="69" onclick="changeshape(this)" alt=""></li>
<li><img class="shapes" data-shape="curved" src="img/curved-vertical.png" width="50" height="69" onclick="changeshape(this)" alt=""></li>
<li><img class="shapes" data-shape="scallop" src="img/scallop-vertical.png" width="50" height="69" onclick="changeshape(this)" alt=""></li>
</ul>
</div>
</div>
<script>
function changecolor(elem) {
var color = elem.getAttribute("data-color");
var shape = elem.getAttribute("data-shape");
var newImageSrc = "img/" + shape + "_" + color + "_" + "img.jpg";
document.getElementById("myimg").src = newImageSrc;
}
function changeshape(elem){
var color = elem.getAttribute("data-color");
var shape = elem.getAttribute("data-shape");
var newImageSrc = "img/" + shape + "_" + color + "_" + "img.jpg";
document.getElementById("myimg").src = newImageSrc;
}
</script>
最佳答案
您需要一些变量来保留当前的color
和shape
。然后,每次更改颜色或形状时,都会更新此变量,然后相应地加载图像。
尝试保留尽可能多的当前代码,您可以将color
和shape
变量移到函数之外。然后changecolor
更改当前颜色,而changeshape
更改当前形状。您可以将color
和shape
变量初始化为初始值。在您的情况下,橙色和正方形。
var color = 'orange';
var shape = 'square';
function changecolor(elem) {
color = elem.getAttribute("data-color");
var newImageSrc = "img/" + shape + "_" + color + "_" + "img.jpg";
document.getElementById("myimg").src = newImageSrc;
}
function changeshape(elem){
shape = elem.getAttribute("data-shape");
var newImageSrc = "img/" + shape + "_" + color + "_" + "img.jpg";
document.getElementById("myimg").src = newImageSrc;
}
参见demo。这将无法使用,因为这些图像不可用,但应该在您的环境中可用。