Question

我在需要分离的不同元素中有相同的单击函数选择器，因为它调用相同的函数而不是在不同的元素中迭代函数。

if($(window).width() < 900 ) {
                    // Interactive Images
                    $('#html-overlay').each(function(){
                    $('#html-overlay .tab').css('opacity','1');         
                        $('#html-overlay').css('left','-300px');    
                            $('#html-overlay .tab').on('click', function () {
                                $('#html-overlay').toggleClass('slide-animation');
                            }); 
                    });
};

它几乎是滑块内的滑出元素。有四个图像，文本滑出，我使用相同的点击功能和选择器来实现它。这是小提琴。

http://jsfiddle.net/60gpktn8/

更新

jQuery(document).ready(function($) {
"use strict"; 
    $('#fullpage').fullpage({
    autoScrolling:false,
    afterSlideLoad: function( anchorLink, index, slideAnchor, slideIndex){
                   updateOverlayForMobile(); 
    },
    onSlideLeave: function( anchorLink, index, slideIndex, direction){
                clearOverlayForMobile();           
    }   
    });
    updateOverlayForMobile();
});
jQuery(window).resize(function($) {
"use strict"; 
    updateOverlayForMobile();
});

function updateOverlayForMobile() {
    if($(window).width() < 900 ) {
        $('.slide.active #html-overlay').css({'left':'-300px' }).find('.tab').css({'opacity':'1'}).on('click', function () {
                $(this).closest('#html-overlay').toggleClass('slide-animation'); 
        });
    }
}
updateOverlayForMobile();

function clearOverlayForMobile() {
    if($(window).width() < 900 ) {
        $('.slide #html-overlay').removeClass('slide-animation');
    }
}

更新了适用于代码的小提琴。

http://jsfiddle.net/60gpktn8/7/

Answer 1

这里有几件事。 ID应该是唯一的，页面上的名称不应超过1。您应该将这些更改为类...您也可以将这些jQuery方法链接起来更简洁一些。我不知道你到底在做什么，我会为你做一个小提琴......

http://jsfiddle.net/madkidflash/7q793p39/1/

$('.html-overlay').css({'opacity':'1', 'left':'-30px' }).find('.tab').on('click', function () {
    $('.html-overlay').removeClass('slide-animation');
    $(this).closest('.html-overlay').addClass('slide-animation');        
});

你不需要'each'循环，你可以引用该类并使用它作为你的基础......并且不知道“。tab”孩子是如何埋葬的，我使用了find方法。

当你使用toggleClass时，如果它当前不在元素上，则添加该类，或者如果它已经存在则删除它...我不相信你想要的那个。我想你要从所有.html-overlay元素中删除该类，并将其添加到单击了.tab元素的.html-overlay元素中。

CSS可能可以通过类来处理。我不知道你在点击时是否正在改变元素的左边或不透明度...如果你是你可以在CSS中设置.html-overlay元素基本属性...当你添加'slide-animation '类到它，覆盖这些属性。如果它与动画无关，你肯定可以创建另一个类并添加/删除它，就像我们使用幻灯片动画一样。

我添加了一个“活动”类，并且已经显示了如何一次添加/删除多个类：

$('.html-overlay').find('.tab').on('click', function () {
    $('.html-overlay').removeClass('slide-animation active');
    $(this).closest('.html-overlay').addClass('slide-animation active');        
});

<强>更新

根据您的小提琴，检查： http://jsfiddle.net/madkidflash/60gpktn8/6/

我必须包含全屏js，因为有一个mime类型错误...此外，至少在小提琴中的fullscreen.js设置似乎存在问题......但是在上面的小提琴中，你应该看看我在哪里调用绑定click事件的方法。我将这些分解为单独的方法，以使测试更容易。

function updateOverlayForMobile() {
    $('.html-overlay').css({'left':'-300px' }).find('.tab').css({'opacity':'1'}).on('click', function () {
        $('.html-overlay').removeClass('slide-animation');
        $(this).closest('.html-overlay').addClass('slide-animation'); 
    });
}

function clearOverlayForMobile() {
    $('.html-overlay').removeClass('slide-animation').find('.tab').off('click');
}

我还修改了标记，以便为html-overlay元素使用类而不是ID

在多个项目中分隔相同的单击功能选择器

1 个答案: