单击时Transform()div无法正常工作

时间:2018-10-15 10:16:38

标签: javascript jquery css

我已经在wordpress中创建了页面,它在mousewheel事件上一次加载了每个部分,在mousewheel事件上,transform属性运行正常。

但是当我绑定click事件进行转换时,则每次单击都会将其转换为屏幕底部的div,然后转到该部分。

请查看此链接:Click Here

当您从右上角的菜单栏中单击“推荐书”时,它将在屏幕底部,然后在“推荐书”部分上移上一个字。

我在点击时使用以下代码:

jQuery( window ).on( "load", function($) {

        //go to specific slider on menu click
        var item = document.getElementsByClassName("scroll-custom-js");
          jQuery.each( item, function( i, val ) {

             this.addEventListener("click",function(e){

                 var link = jQuery(this).attr('href');
                 jQuery('.scroll-custom-js').removeClass('arrow-custom');
                 jQuery(this).addClass('arrow-custom');
                 gotoSlide(link);

               });
          });
 });

 var gotoSlide = function () {

     document.querySelector(sliderElement).style.transform = 'translate3d(0, ' + -(currentSlide - 1) * 100 + '%,0)';

     document.querySelector(sliderElement).style.transition = 'transform 1000ms ease 0s';

  });       

在jQuery中:

jQuery('a.scroll-custom-js').click(function(e){
                var link = jQuery(this).attr('href');
                jQuery('.scroll-custom-js').removeClass('arrow-custom');
                 jQuery(this).addClass('arrow-custom');
                 e.preventDefault();
                 var move_slides = jQuery(link).attr('data-slider-index');
                 move_slides = move_slides - 1;


                 jQuery('.slides_custom').css({
                     transform: 'translate3d(0, ' + -(move_slides) * 100 + '%,0)',
                });
          });

1 个答案:

答案 0 :(得分:2)

使用unbind()删除绑定到该div的所有点击事件

jQuery('a.scroll-custom-js').unbind('click').click(function(e){