多個html data- *屬性和js函數不起作用

Question

當我僅聲明了一個data-*屬性時，該函數運行良好，但是如果我的產品（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>

Answer 1

您可以將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>

Answer 2

您需要一些變量來保持當前的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;
}

觀看演示 。 這將無法使用，因為這些圖像不可用，但應該在您的環境中可用。