CODEWITHSUNDEEP
jqueryclickeach
chris_r
chris_r

Reputation: 2147

Separating same click function selector within multiple items

I have the same click function selector within different elements that I need to separate because it is calling the same function and not iterating the functionality within different elements.

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');
                            }); 
                    });
};

It's pretty much a slide-out element within a slider. There are four images with text that slide out and I am using the same click function and selector to achieve it. Here is fiddle.

http://jsfiddle.net/60gpktn8/

UPDATE

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');
    }
}

Updated fiddle that works with code.

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

Upvotes: 0

Views: 193

Answers (1)

Jeff Longshore
Jeff Longshore

Reputation: 46

Several things here. IDs should be unique, you shouldn't have more than 1 with the same name on a page. You should probably change those to be classes... You can also chain those jQuery methods to be a little more concise. Without knowing exactly what it is you are doing, Ill take a stab at a fiddle for you...

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');        
});

You don't need the 'each' loop, you can reference the class and use that as your base... and not knowing really how buried the ".tab" child is, I used the find method.

When you use toggleClass that will either add the class if its not currently on the element, or remove it if it's already there... which I don't believe is what you're wanting. I think you want to remove the class from all of the .html-overlay elements, and add it to the .html-overlay element in which the child .tab element has been clicked.

The CSS could probably be handled via classes. I dont know if you are changing the left or the opacity of the element when clicked... if you are you could just set the .html-overlay elements base properties in the CSS... and when you add the 'slide-animation' class to it, override those properties. If it isnt related to the animation, you could definitely create another class and add / remove that as we are with the slide-animation.

I added an "active" class and have shown how to add / remove several classes at a time:

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

UPDATE

Based on your included fiddle, check: http://jsfiddle.net/madkidflash/60gpktn8/6/

I had to include the fullscreen js since there was an mime type error... Also, there seems to be an issue with the fullscreen.js setup in the fiddle at least... but in the above fiddle, you should see where I call the method to bind the click event. I broke those out into individual methods to make testing easier. 

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');
}

I also modified the markup to use classes rather than IDs for the html-overlay elements

Upvotes: 1

Related Questions