在javascript中更改属性值

Question

i am trying to change an attribute at the img tag and it's not working i do not know why. 我正在尝试更改img标签处的属性，但它不起作用，我不知道为什么。 My code is changeing the BIG img source and the ZOOM source, but the code only changes the source but not the ZOOM, here is my code: 我的代码正在更改BIG img源和ZOOM源，但是代码仅更改源而不是ZOOM，这是我的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
    <script src='jquery-1.8.3.min.js'></script>
    <script src='jquery.elevatezoom.js'></script>
    <!--script src='jquery-1.8.3.min.js'></script-->
    <script>
    function colorImage(x){
    var newsrc = x.src.replace("thumb", "large");
    var d = document.getElementById("zoom_06_l"); 
    d.src = newsrc;
    d.setAttribute("data-zoom-image", newsrc);
}
    </script>

</head>

<style>
a{
    color:black;
    text-decoration:none;
}

.element{
width:150px;
}

.element .code {
text-align:center;
padding:10px;
}
</style>

<body>
<div style="width:960px;margin:0 auto;">
                <img id="zoom_06_l" src="large/001.jpg" width="960" data-zoom-image="large/001.jpg"/>


                <div id="gallery">
                    <a href="#" data-image="large/001.jpg" data-zoom-image="large/001.jpg"> 
                        <div class="element" style="float:left;margin-right:5px;">
                            <img id="zoom_06" src="thumb/001.png" /><br> 
                            <div class="code">דגם מספר : 0025</div>
                        </div>
                    </a>
                    <a href="#" data-image="large/30001.png" data-zoom-image="large/30001.png"> 
                        <div class="element" style="float:left;margin-right:5px;">
                            <img onclick="javascript:colorImage(this)" id="zoom_06" src="thumb/30001.png" /><br> 
                            <div class="code">דגם מספר : 30001</div>
                        </div>          
                    </a>

                </div>


</div>




<script>
    $("#zoom_06_l").elevateZoom({
    zoomType    : "lens",
    lensShape : "round",
    lensSize : 250 
    }); 
</script>


</body>
</html>

data-zoom-image at the img with id zoom_06_l is not changing i do not know why. ID为zoom_06_l的img处的data-zoom-image没有更改，我不知道为什么。 any help ? 有什么帮助吗？

Answer 1

In place of 代替

d.setAttribute("data-zoom-image", newsrc);

try using this 尝试使用这个

d.dataset.zoomImage = newsrc;

For details please refer to 详情请参阅

" https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes " “ https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/Using_data_attributes ”

在javascript中更改属性值

问题描述

1 个解决方案

解决方案1
0 2015-06-07 18:49:29

在javascript中更改属性值

问题描述

1 个解决方案

解决方案1 0 2015-06-07 18:49:29

解决方案1
0 2015-06-07 18:49:29