Question

我正在使用基于Jquery Cycle的Aaron Vanderzwan的幻灯片maximage，但是我在向幻灯片添加onclick事件时遇到了一些麻烦。在研究堆栈交换的解决方案时，我遇到了一个“点击”z-index定位div的解决方案，并在我的设置中添加了pointer-events:none CSS属性。这个jsfiddle：http://jsfiddle.net/HDRCREATIVE/cj9sh/是我正在制作的幻灯片的一个例子。我的问题是我在向页面添加以下jquery时遇到问题。任何指导都是值得赞赏的。提前谢谢！

//The following was taken from the maximage forum's.

var $maximage = $('#maximage');

// Trigger Maximage
$maximage.maximage();

// Capture click on maximage's children
$maximage.children().on('click', function(){
// Retrive our URL (set in data-href attribute on img tags)
var url = $(this).data('href');

// If our URL is set, open a new window with that URL
//    You can certainly use window.location here too
if(url.length > 0){
    window.open(
        url, // <- This is what we set with the data-href attribute
        '_blank' // <- This is what makes it open in a new window.
    );
}
});

更新 - 工作代码（感谢Gulty）
见JsFiddle http://jsfiddle.net/cj9sh/10/
为了让maximage产生我需要的完整图像响应效果，我必须保留cssBackgroundSize: false,属性。 Gulty的回答让我明白我的href被附加到我的包含div。这并不好，因为我在CMS场景中使用它，并且需要能够根据用户动态附加不同的链接。因此，为了href保留<img>，我将它们封装在<div>内并简化了我在上面尝试使用的click函数。初步测试到目前为止，如果我遇到任何新问题，将会更新。

Answer 1

如果你检查你的小提琴，你可以看到在启动JS之后，图像上不再有数据。问题是你正在做的所有背景知识。不确定maximage是如何工作的，但似乎

background-size（或者，如果你不使用那并不重要）将图像转换为.mc-image div内的背景图像。 data-href也被添加到div中（允许您单击它）。如果你现在使用

cssBackgroundSize: false, // We don't want to use background-size:cover for our custom size

背景图像div再次转换为图像，并删除data-attr。

所以要么不要使用cssBackgroundSize：false并使div .mc-image可单击（只需删除data-href调用中的子节点）或采取其他方法

为jquery幻灯片添加onclick事件

1 个答案: