Question

我已将这个非常棒的codepen实现到我的网站中： https://codepen.io/ccrch/pen/yyaraz

$('.display-image')
.on('change', function(){
  $(this).children('img').css({'transform': 'scale('+ $(this).attr('data-scale') +')'});
})
.on('mouseover', function(){
  $(this).children('img').css({'transform': 'scale('+ $(this).attr('data-scale') +')'});
})
.on('mouseout', function(){
  $(this).children('img').css({'transform': 'scale(1)','transition': 'transform .3s ease-out'});
})
.on('mousemove', function(e){
  $(this).children('img').css({'transform-origin': ((e.pageX - $(this).offset().left) / $(this).width()) * 100 + '% ' + ((e.pageY - $(this).offset().top) / $(this).height()) * 100 +'%'});
})

问题是我的目标是光滑的滑块对象： http://kenwheeler.github.io/slick/

当光滑过滤目标对象'.display-image'时，不再注册这些点击事件。我该如何重新定位这个对象？

Answer 1

考虑给滑块一个ID，然后将其引用为$（＆＃39; #id＆＃39;）而不是样式类（这是jquery查找点显示图像的方式）。

Answer 2

我制定了解决方案。为了让代码看到事件监听器中的任何更改，而不是：

$('.display-image').on('click', function() {*code here*});

我把它改成了

$(document).on('click', '.display-image', function() {*code here*});

JQuery单击目标

2 个答案: