Show div only if specific other divs have been clicked

Question

I am new to jQuery (this is my second attempt). I looked for answers via Google and StackOverflow and I have tried quite a few but have yet to figure out the last part of my problem. Any help or guidance is most appreciated.

What I want to do is have a bunch of images(apple, pumpkin, candle, etc) that when clicked, fade the image out and then cross off the image's name in a text list. Then, if you click on specific sets of those images they will show a div containing a deal.

An example: If you click on the images of apple, pear and pumpkin (in any order) a deal will show. Another example: You click on the images of candle, apple, pumpkin and key(in any order) a deal will show. Another example: You click on all image items(in any order) a deal shows.

I have the first part working (click on an image, it fades out and crosses its name off the list).

What I need help with is checking to see if certain combinations of images have been clicked and if so show the deal div.

I was thinking I could use index for this but I haven't been able to make it work. Maybe there is a better way? Thanks for any guidance.

Here is my test code so far (JSFIDDLE):

HTML

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    Apple
    Pumpkin
    Candle
    Pear
    Mouse
    Key
    
    Reveal Deal #1 after finding apple, candle and mouse
    This is deal box #1! You must have found apple, candle and mouse! WIN
    Reveal Deal #2 after finding key, pumpkin, pear and mouse!
    This is deal box #2! You must have found key, pumpkin, pear and mouse!
    Reveal Deal #3 after finding ALL objects!
    This is deal box #3! You must have ALL the items!
    `

CSS

.intro, .someText {
        color:#333;
        font-size:16px;
        font-weight: bold;
    }
    .deal1, .deal2, .deal3 {
        font-size: 18px;
        color: red;
    }

Javascript: jQuery

$(document).ready(function () {

    $('.deal1, .deal2, .deal3').hide();

    $('.pic1').click(function () {
        $(this).data('clicked');
        $('#items p.apple').wrap('');
        $(".pic1").fadeOut("slow");
    });

    $('.pic2').click(function () {
        $(this).data('clicked');
        $("#items p.pumpkin").wrap("");
        $(".pic2").fadeOut("slow");
    });

    $('.pic3').click(function () {
        $(this).data('clicked');
        $("#items p.candle").wrap("");
        $(".pic3").fadeOut("slow");
    });

    $('.pic4').click(function () {
        $(this).data('clicked');
        $("#items p.pear").wrap("");
        $(".pic4").fadeOut("slow");
    });

    $('.pic5').click(function () {
        $(this).data('clicked');
        $("#items p.mouse").wrap("");
        $(".pic5").fadeOut("slow");
    });

    $('.pic6').click(function () {
        $(this).data('clicked');
        $("#items p.key").wrap("");
        $(".pic6").fadeOut("slow");
});

$(document).on('click', '*', function (e) {
        e.stopPropagation();
        var tag = this.tagName;
        var index = $(tag).index(this); // doesn't work, as it gives the total no. elements

        $('#output').html(index);
    });

});

PlantTheIdea · Accepted Answer

Create a custom event:

$('.HiddenItem').css({display:'none'}).on('somethingElseClicked',function(){
    $(this).show();
});

And then trigger it with the other click:

$('.ItemToTrigger').on('click',function(e){
    $('.HiddenItem').trigger('somethingElseClicked');
});

This is obviously supergeneralized, but it gives the framework necessary to trigger the event you want.

EDIT

Alright, so you will need to store each value for the clicks needed, as well as the total needed. I always prefer to use object-based variables rather than globals, so:

var click = {
    deal1:[0,2],
    deal2:[0,3],
    deal3:[0,5]
}

This creates arrays for each deal, the first being the number of clicks that have happened and the second being the total needed minus 1. You will then increment the "clicks that have happened" value, as well as prevent it from allowing double-clicks, by the JS described later. First, I recommend adding a generic class to all clickable items, as well as the deal items they are associated with, and verifying that way. The HTML:

And the JS I described:

$('.picItem').on('click',function(){
    var $this = $(this),
        $fruit = $this.data('fruit');

    $this.fadeOut('slow');

    if($this.hasClass('d1') && !$this.hasClass('clicked1')){
        if(click.deal1[0] < click.deal1[1]){
            click.deal1[0]++;
            $this.addClass('clicked1');
        } else {
            $('.deal1').trigger('showDeal');
        }
    }

    if($this.hasClass('d2') && !$this.hasClass('clicked2')){
        if(click.deal2[0] < click.deal2[1]){
            click.deal2[0]++;
            $this.addClass('clicked2');
        } else {
            $('.deal2').trigger('showDeal');
        }
    }

    if(!$this.hasClass('clicked3')){
        if(click.deal3[0] < click.deal3[1]){
            click.deal3[0]++;
            $this.addClass('clicked3');
        } else {
            $('.deal3').trigger('showDeal');
        }
    }

    $('.'+$fruit).wrap("");
});

The last if is for all elements clicked, hence not the need for adding a class and checking. The final piece grabs the associated data attribute and strikes it out.

Now you just trigger the event:

$('.deal1,.deal2,.deal3').on('showDeal',function(){ $(this).show(); });

This event will only be triggered when the appropriate number of clicks has been reached. Here is the jsFiddle you gave me updated to show it is working as requested.

If you want to only allow one deal, you would just turn off the event after being triggered:

var $allDeals = $('.deal1,.deal2,.deal3'); $allDeals.on('showDeal',function(){ $(this).show(); if($(this).hasClass('deal3')){ // this is to prevent deal 1 and deal 2 showing, since the criteria for them is also met $allDeals.not('.deal3').hide(); } // this turns off all other deals $allDeals.off('showDeal'); $('.picItem').off('click'); });

Not sure if you would need it or not, figured I would include it just in case. Here is an updated jsFiddle to show that case working.

Show div only if specific other divs have been clicked

Answers (2)

Related Questions