更改图像的自定义属性值答案

【问题标题】：Change the value of a custom attribute for an image更改图像的自定义属性值
【发布时间】：2014-06-08 23:25:52
【问题描述】：

我有一个包含两个缩略图的文档（正面和背面，例如银行支票）。我可以通过在缩放中显示原始（大）图像中正面图像的一部分来放大正面缩略图。到目前为止一切正常。单击前面的图像，将其与后面交换，我应该能够显示后面的缩放。但是，这不起作用。我认为应该修改 zoomingRear() 属性并为自定义属性提供一个值，或者 zooming() 需要以某种方式刷新以显示其他图像。有什么想法吗？

我的图片来源来自会话：

<img style="border:1px solid #e8e8e6;" id="zoom_mw" onclick="this.src = this.src == rear() 
? front() : rear();" src='<%= Session("ImageThumbnailPathFront")%>' 
data-zoom-image='<%= Session("ImagePathFront")%>' width="500" height="250"  />

jQuery

<script type="text/javascript">
    function pageLoad(sender, args)
    {
     zooming()
    }
    function front() {    

        return onImg = '<%= Session("ImageThumbnailPathFront")%>'; 

    }
    function rear() {    

        return offImg = '<%= Session("ImageThumbnailPathRear")%>'; 
        zoomingRear()
     }
    function zooming() {   

        $(document).ready(function () {
            $("#zoom_mw").elevateZoom({ scrollZoom: true });
        });
    }
    function zoomingRear() {    // <-- Problematic function

        $(document).ready(function () {
            document.querySelector(data-zoom-image='<%= Session("ImagePathRear")%>').elevateZoom({ scrollZoom: true });
           // document.getElementById(
        });
    }
    function getElementByAttribute(attr, value, root) {
        root = root || document.body;
        if(root.hasAttribute(attr) && root.getAttribute(attr) == value) {
            return root;
        }
        var children = root.children, 
            element;
        for(var i = children.length; i--; ) {
            element = getElementByAttribute(attr, value, children[i]);
            if(element) {
                return element;
            }
        }
        return null;
    }

</script>

【问题讨论】：

标签： javascript jquery

【解决方案1】：

您正在通过 onclick 调用 zoomingRear()，但这是在页面加载之后的方式，因此在 zoomingRear() 中使用 $(document).ready() 没有意义。只需尝试删除它并留下如下代码：

function zoomingRear() { 
    document.querySelector(data-zoom-image='<%= Session("ImagePathRear")%>').elevateZoom({ scrollZoom: true });
}

【讨论】：