Question

Soooo ......我在这里找到了这个很好的代码，以制作一个也适用于移动设备的翻转图像。这是我的代码：

jQuery(document).ready(function($) {
    $('img.hophop').bind('mouseenter mouseleave', function() {
        $(this).attr(
            {src: $(this).attr('data-other-src'), 'data-other-src': $(this).attr('src')}
        )
   });
    $('img.hophop').bind('touchstart touchend', function(event) {
        event.preventDefault();
        $(this).attr(
            {src: $(this).attr('data-other-src'), 'data-other-src': $(this).attr('src')}
        )
   });
});

它的功能就像一个魅力，除了......我在WordPress中使用它。每当我从文本编辑器移动到wysiwyg时，wordpress都会更改我的链接。由此：

<img data-other-src="http://www.toeps.nl/blog/wp-content/uploads/2016/06/MG_3502voor.jpg" class="alignleft size-full wp-image-61182 hophop" src="http://www.toeps.nl/blog/wp-content/uploads/2016/06/MG_3502na.jpg" alt="_MG_3502na" width="1080" height="1080" />

对此：

<img class="alignleft size-full wp-image-61182 hophop" src="http://www.toeps.nl/blog/wp-content/uploads/2016/06/MG_3502na.jpg" alt="_MG_3502na" width="1080" height="1080" data-other-src="http://www.toeps.nl/blog/wp-content/uploads/2016/06/MG_3502voor.jpg" />

所以它将data-other-src移动到后面，突然间，它不再工作了？！我为什么要打破我的头脑。任何人都可以帮助我吗？

编辑：我解决了它！

显然我的WordPress视网膜插件为响应性bla bla添加了一些src设置的东西。禁用它，并且它正在工作！

带有data-other-src的jQuery翻转图像只有在某个地方才有效

0 个答案: