私はjQueryが初めてです（これは私の2回目の試みです）。Google と StackOverflow を介して回答を探しましたが、かなりの数を試しましたが、問題の最後の部分をまだ把握していません。どんな助けや指導も大歓迎です。
私がやりたいのは、クリックすると画像がフェードアウトし、テキストリストで画像の名前を消す画像（リンゴ、カボチャ、ろうそくなど）の束です。次に、これらの画像の特定のセットをクリックすると、取引を含む div が表示されます。
例:リンゴ、ナシ、カボチャの画像をクリックすると (順不同)、取引が表示されます。 別の例:キャンドル、リンゴ、カボチャ、鍵の画像をクリックすると (任意の順序で) 取引が表示されます。別の例: 取引が表示するすべての画像アイテム (任意の順序で) をクリックします。
最初の部分が機能しています (画像をクリックすると、フェードアウトし、その名前がリストから消えます)。
助けが必要なのは、特定の画像の組み合わせがクリックされたかどうかを確認し、クリックされた場合は取引 div を表示することです。
これには index を使用できると考えていましたが、機能させることができませんでした。多分もっと良い方法がありますか？ご指導ありがとうございます。
これまでのテストコードは次のとおりです（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>
<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;
}
ジャバスクリプト：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");
});
$('.pic3').click(function () {
$(this).data('clicked');
$("#items p.candle").wrap("<strike>");
$(".pic3").fadeOut("slow");
});
$('.pic4').click(function () {
$(this).data('clicked');
$("#items p.pear").wrap("<strike>");
$(".pic4").fadeOut("slow");
});
$('.pic5').click(function () {
$(this).data('clicked');
$("#items p.mouse").wrap("<strike>");
$(".pic5").fadeOut("slow");
});
$('.pic6').click(function () {
$(this).data('clicked');
$("#items p.key").wrap("<strike>");
$(".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);
});
});