Display the div only when certain other divs have been clicked

I am fairly new to jQuery (this is my second attempt at using it). I have searched for solutions on Google and StackOverflow, tried several approaches, but still can't solve the last part of my issue. Any assistance or direction would be greatly appreciated.

My goal is to create a set of images (such as apple, pumpkin, candle, etc) that, when clicked, will fade out the image and cross off its name from a text list. Additionally, if you click on specific combinations of these images, a div containing a deal will be displayed.

For example: Clicking on the apple, pear, and pumpkin images (in any order) will reveal a deal. Another example: Clicking on the candle, apple, pumpkin, and key images (in any order) will also show a deal. Yet another example: Clicking on all image items (in any order) will display a deal.

I've already achieved the functionality where clicking an image fades it out and crosses off its name in the list.

What I'm struggling with is determining if specific combinations of images have been clicked and showing the corresponding deal div.

I thought about using index for this purpose, but so far I haven't been successful. Is there a better approach? Thank you for any guidance.

Here's the code I've been testing so far (JSFIDDLE):

HTML

<div class="pic1">
    <img width="50" height="50" src="http://us.123rf.com/400wm/400/400/chudtsankov/chudtsankov1208/chudtsankov120800002/14670247-cartoon-red-apple.jpg" />
</div>
<div class="pic2">
    <img width="50" height="50" src="http://www.in.gov/visitindiana/blog/wp-content/uploads/2009/09/pumpkin.gif" />
</div>
<div class="pic3">
    <img width="50" height="50" src="http://upload.wikimedia.org/wikipedia/commons/f/fc/Candle_icon.png" />
</div>
<div class="pic4">
    <img width="50" height="50" src="http://tasty-dishes.com/data_images/encyclopedia/pear/pear-06.jpg" />
</div>
<div class="pic5">
    <img width="50" height="50" src="http://free.clipartof.com/57-Free-Cartoon-Gray-Field-Mouse-Clipart-Illustration.jpg" />
</div>
<div class="pic6">
    <img width="50" height="50" src="http://images.wisegeek.com/brass-key.jpg" />
</div>
<div id="items">
    <p class="apple">Apple</p>
    <p class="pumpkin">Pumpkin</p>
    <p class="candle">Candle</p>
    <p class="pear">Pear</p>
    <p class="mouse">Mouse</p>
    <p class="key">Key</p>
</div>
<div class="someText">Reveal Deal #1 after finding apple, candle and mouse</div>
<div class="deal1">This is deal box #1! You must have found apple, candle and mouse! WIN</div>
<div class="someText">Reveal Deal #2 after finding key, pumpkin, pear and mouse!</div>
<div class="deal2">This is deal box #2! You must have found key, pumpkin, pear and mouse!</div>
<div class="someText">Reveal Deal #3 after finding ALL objects!</div>
<div class="deal3">This is deal box #3! You must have ALL the items!</div>
<div id="output"></div>

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('<strike>');
        $(".pic1").fadeOut("slow");
    });

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

    // The rest of the pic event click listeners go here...
    
    $(document).on('click', '*', function (e) {
        e.stopPropagation();
        var tag = this.tagName;
        var index = $(tag).index(this); // This line doesn't seem to work correctly

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

});

Answer №1

Start by assigning a corresponding data value to your divs based on their p items. For example, when setting up your div (and all other divs):

<div class="pic" data="pumpkin">

Instead of:

<div class="pic2"> 

You can use a concise jQuery script:

$('.pic').click(function () {
    $("#items p."+$(this).attr("data")).wrap("<strike>");
    $(this).fadeOut("slow");
});

You can create your sets like this: set1 = ["apple","pumpkin"] After each click event, you can check the clicked paragraphs with:

$(document).ready(function () {
var set1 = ["apple", "candle", "mouse"]


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

$('.pic').click(function () {

    $("#items p." + $(this).attr("data")).wrap("<strike>").addClass("strike");
    $(this).fadeOut("slow");
    
    // Checking for completion of set1
    set1Completed = true;
    for (i = 0; i < set1.length; i++) {
        if ($("p.strike." + set1[i]).length==0) {
            set1Completed = false;
            break;
        }
    }
    if (set1Completed) {
        $('div.deal1').fadeIn(); // or fadeIn whatever u want
    }
});

Answer №2

Develop a personalized event:

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

Then activate it with another click event:

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

This explanation is quite broad, but it sets the foundation for triggering the desired event.

UPDATE

To manage the required number of clicks for each deal and ensure they meet the total requirement, create object-based variables instead of using global ones like this:

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

These arrays track the current number of clicks and the total needed minus one for each deal respectively. The JavaScript code below increments the click count and prevents double-clicks as described earlier. Start by adding a common class to all clickable items and their associated deals to streamline verification. Here's the HTML structure:

<div class="picItem d1" data-fruit="apple">
<div class="picItem d2" data-fruit="pumpkin">
<div class="picItem d1" data-fruit="candle">
<div class="picItem d2" data-fruit="pear">
<div class="picItem d1 d2" data-fruit="mouse">
<div class="picItem d2" data-fruit="key">

And the corresponding JavaScript snippet:

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

    // Additional checks for other deals...

    $('.'+$fruit).wrap("<strike>");
});

Finally, trigger the event when necessary:

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

This ensures the event is only triggered upon reaching the specified number of clicks. For exclusive display of a single deal, disable other events after activation:

var $allDeals = $('.deal1,.deal2,.deal3');

$allDeals.on('showDeal',function(){
    $(this).show();

    if($(this).hasClass('deal3')){
        $allDeals.not('.deal3').hide();
    }

    $allDeals.off('showDeal');
    $('.picItem').off('click');
});

Include this behavior in your implementation if needed. Check this updated jsFiddle link to see the modified functionality in action.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I prevent katex from overflowing?

Currently, I am facing a challenge in handling katex equations that overflow in a react native webview. I am attempting to dynamically break the equations into multiple lines to prevent scrolling and display them separately. Any assistance on this matter ...

Utilizing Javascript to initiate an AJAX call to the server

I am creating an application similar to JSbin / JS fiddle. My goal is to update my database by making an ajax request to the server when the user clicks on the save code button and submits the values entered in the textarea. However, I seem to be encount ...

How do you trim a string and display the final 3 characters?

When dealing with a list of objects, I want to ensure that the chain of tasks does not become too long and break the table or appear aesthetically unpleasing. Therefore, my goal is to trim the tasks and display only the last 3. In the image below, multiple ...

Looking to create a div in HTML with two columns and two rows for display

Query: I am facing issues adjusting these grids using HTML and CSS. I have attempted to place them in a single frame within a separate div, but it's not working as expected. I need help aligning the grids according to the provided image below. Can som ...

Why does this function properly on every browser except for Opera?

I have implemented a script that allows me to replace the standard file upload input with a custom image. The script also ensures that an invisible 'browse' button appears underneath the mouse pointer whenever it hovers over the custom image. Thi ...

Creating an array of logos in ReactJS with the help of TailwindCSS

After seeing multiple implementations of this feature, I find myself struggling to search for a solution. I can only access the HTML and CSS through inspecting elements, wondering if others are facing the same issue as me. Typically, we aim to implement t ...

Enhancing Material UI List Items with Custom Styling in React.js

My website's navigation bar is created using material-ui components, specifically the ListItem component. To style each item when selected, I added the following CSS code: <List> {routes.map(route => ( <Link to={route.path} key={ro ...

Page refreshing in Angular 5 consistently redirects to the home page instead of staying on the current page

I am experiencing an issue with the navigation on my application. When I navigate to routes like getEmp-by-id or page-not-found and hit refresh, the application automatically redirects me back to app-home. However, I would like it to stay on the same pag ...

ng-click function executing function right away without needing a click

As a newcomer to angular, I am in the process of setting up a login system. I have implemented 'buttons' that are meant to redirect users to an Oauth prompt for their Facebook or Google account upon clicking. However, I'm encountering an iss ...

The CSS styles do not seem to be taking effect on the Bootstrap

Here's a snippet of code extracted from my website's html and css files. My intention is to make the navbar slightly transparent with centered links, but for some reason, the css styles are not applying correctly to the navbar. HTML <body ...

What is causing Ajax to fail in connecting to the server?

When trying to submit a simple ajax form and send a response to my server, I keep getting the following error message : Forbidden (CSRF token missing or incorrect.): /designer/addOne/ [31/Jul/2017 12:49:12] "POST /designer/addOne/ HTTP/1.1" 403 2502 Alt ...

Is there a way to properly direct to an internal page while utilizing [routerLink] and setting target="_blank" without triggering a full page reload?

I'm attempting to use [routerLink] along with target="_blank" to direct to an internal page without triggering a full app reload. Currently, the page opens in a new tab, but the whole application is refreshed. Here is the HTML: <a [routerLink]=" ...

Organizing stepper elements within a wrapper with bootstrap for a seamless layout

I am struggling with making a list of header icons in a Stepper container responsive to page size changes. I have attempted to adjust the placement of the container within different div elements, but it has not yielded the desired results. My current setu ...

Invoke the JavaScript function on the HTML button click event, sending the ASP parameter

Currently, I am working with node and passing a parameter in the following manner: res.render('page.ejs',{"product" : product }); The paramter 'product' is in JSON format. Within the 'page.ejs' file, I am attempting to call ...

I am encountering the ERR_STREAM_WRITE_AFTER_END error in my Node.js API. Does anyone know how to resolve this problem?

When I try to upload a file using the API from the UI, I encounter the following issue. I am interacting with a Node.js API from React.js and then making calls to a public API from the Node.js server. https://i.stack.imgur.com/2th8H.png Node version: 10. ...

Issue: Keeping the mat-form-field element in a single line

I am facing an issue with incorporating multiple filters for each column in an angular material table. I cannot figure out why the filter input is not moving to a new line under the header. Here is an image for reference -> Angular material table with m ...

Tips for retrieving a variable from a $.getJSON function

My question is similar to this one: How can I return a variable from a $.getJSON function I have come across several duplicates on Stack Overflow, but none of them provided a satisfactory answer. I understand that $.getJSON runs asynchronously, and I hav ...

What is the best method to extract pictures from "Google Images" by utilizing the custom search API when the control panel restricts users to inputting only website URLs for searching?

I have been attempting to utilize the Google Custom Search API in order to retrieve images, but unfortunately I am not seeing the same results as those displayed in Google Images. When I access the custom search control panel, it instructs me to add specif ...

Rendering components asynchronously in ReactJS

After completing my ajax request, I need to render my component. Here is a snippet of the code: var CategoriesSetup = React.createClass({ render: function(){ var rows = []; $.get('http://foobar.io/api/v1/listings/categories/&apo ...

Having trouble accessing the selected item in the $scope when using ng-options inside ng-repeat?

I am looking to achieve the following: I have an array called 'all' that contains all possible items. I want to create a subset of that array and store it in 'subset': JavaScript (js.js): var app = angular.module('myApp', [ ...