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