当我只声明一个 data-*
属性时,该函数运行良好,但如果我的产品(产品图像)有多个 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>
最佳答案
您可以将 json 传递给 data 属性,不要使用内联 JavaScript,尝试将逻辑与标记分开
data-json='{"color": "blue", "shape": "circle"}'
或者使用jquery简单访问DOM
data-color="blue"
data-shape="circle"
$("selector").data("color")
$("selector").data("shape")
<a href="#" id="elem" data-color="blue" data-shape="circle">click me!</a>
<script>
$(function(){
var el = $("#elem"),
color, shape;
el.click(function(event){
event.preventDefault();
color = $(this).data("color");
shape = $(this).data("shape");
changeSomething(color, shape);
});
function changeSomething(color, shape){
console.log(color + " " + shape);
}
});
</script>
或
<a href="#" id="elem" data-param='{"color": "blue", "shape": "circle"}'>click me!</a>
<script>
$(function(){
var el = $("#elem"),
param = {};
el.click(function(event){
event.preventDefault();
param = $(this).data("param");
changeSomething(param);
});
function changeSomething(param){
console.log(param);
}
});
</script>
关于javascript - 多个 html data-* 属性和 js 函数不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27080780/