在 javascript 中使用 Jquery 函数答案

【问题标题】：Using Jquery Functions in javascript在 javascript 中使用 Jquery 函数
【发布时间】：2013-02-27 07:46:28
【问题描述】：

为了清晰和简洁而进行了全面修改

我正在使用如on this website 所示的提升变焦（镜头变焦功能）。我有一个充满二进制图像的 Radrotator，我在旋转器的 DataBound 上给出了一个 onclick 事件。 Onclick 我想根据他们从 Rotator 所有客户端单击的图像更改 Rotator 上方更大的主图像。

实际上屏幕上的图像确实发生了变化，但是，放大功能仍然显示第一张图像。

<img id="zoom_07" runat="server" src="small.jpg" alt="image" />

以下是两个 javascript 函数。第一个是使用 elevatezoom 来放大图像，而第二个是在旋转器中调用二进制图像的 onclick。

  <script type="text/javascript" >
jQuery(document).ready(function ($) {
    $("#zoom_07").elevateZoom({
        zoomType: "lens",
        lensShape: "round",
        lensSize: 200
    });
});

function changeImage(url) {

    var img = document.getElementById('zoom_07');
    img.src = url;
    img.setAttribute('data-zoom-image', url);
}

如何在放大镜客户端更改图像？感谢您在此问题上提供的任何帮助。

【问题讨论】：

你的问题有点不清楚，你说'如何在 JAVASCRIPT 函数中调用这个 jquery 函数？目前尚不清楚您指的是什么 jQuery 函数。在您展示的代码中，我没有看到任何特别之处，除非遗漏了某些内容。请参阅“为 jQuery 命名空间起别名”下的 api.jquery.com/ready 部分。您准备好的函数所做的就是将您的 jQuery 变量转换为在您的处理程序方法中使用 $ 的别名。如果您从 ready 函数中获取代码并将 $ 替换为 jQuery，它应该可以在您的 javascript 函数中使用。
我希望做的是在 changeImage 函数 b/c 中调用 $("#zoom_07").elevateZoom，data-zoom-image 图像未正确更改为 img.src 图像确实改变了。我在上面编辑了我的问题。如果还不清楚，请告诉我。
根据您的新描述，其他人遇到了此问题并获得了最新版本：elevateweb.co.uk/q/discussion/5/… - 否则，我想我建议您向该站点的帮助台发布问题； - 这里可能没有人愿意调试别人的插件代码。
谢谢马克。我相信你是对的。

标签： javascript jquery asp.net .net telerik

【解决方案1】：

jQuery 是 JavaScript，因此您已经在 JavaScript 函数中调用它。它恰好是 document ready 上的匿名函数。

function changeImage(url) {
    var img = document.getElementById('zoom_07');
    img.src = url;
    img.setAttribute('data-zoom-image', url);

    $(img).elevatedZoom({
        zoomType: "lens",
        lensShape: "round",
        lensSize: 200
    });
}

上面的代码是您的事件处理程序，已更新以显示您是否希望调用该函数来更新缩放。

【讨论】：

数据缩放图像仍未正确更新。我认为这将是解决方法。
我在设置 data-zoom-image url 后发出警报，并且该属性实际上正在改变，但对于用户来说并没有改变。放大镜只会显示之前放大的图像，而在 img.src 中定义的图像确实会发生变化。

【解决方案2】：

我对您点击的内容和此处的网址来源做了一些广泛的假设：

(function ($) {
    // I invented this, use your element
    $('#clickemeid').click(function () { 
        // I invented this "someattr" attribute, set to where you get that
        var url = $(this).attr('someattr');
        $("#zoom_07").attr('src', url).attr('data-zoom-image', url).elevateZoom({
            zoomType: "lens",
            lensShape: "round",
            lensSize: 200
        });
    });
})(jQuery);

现在，假设您要在 src 和 data-zoom-image 之间切换

(function ($) {
    $('#zoom_07').click(function () {
        var me = $(this);
        var zoomurl = me.attr('data-zoom-image');
        var origurl = me.attr('src');
        me.attr('data-zoom-image', origurl).attr('src', zoomurl).elevateZoom({
            zoomType: "lens",
            lensShape: "round",
            lensSize: 200
        });
    });
})(jQuery);

【讨论】：

这些都不起作用。请看我修改后的问题，因为我试图让它更清楚一点。

【解决方案3】：

This is the solution我去了。我在旋转器（绑定到二进制图像）中创建了图像标签，并在点击这些图像时更改了主图像。当然，我必须将二进制图像转换为常规图像，然后保存。

【讨论】：