javascript - 仅当特定的其他 div 被点击时才显示 div

Question

我是 jQuery 的新手(这是我的第二次尝试)。我通过谷歌和 StackOverflow 寻找答案，我已经尝试了很多，但还没有弄清楚我问题的最后一部分。非常感谢任何帮助或指导。

我想要做的是有一堆图像(苹果、南瓜、蜡烛等)，单击它们时，图像会淡出，然后在文本列表中划掉图像名称。然后，如果您单击这些图像的特定组，它们将显示一个包含交易的 div。

示例:如果您点击苹果、梨和南瓜的图像(以任何顺序)，将显示交易。另一个例子:您点击蜡烛、苹果、南瓜和 key 的图像(以任何顺序)，将显示交易。另一个例子:您点击交易显示的所有图像元素(以任何顺序)。

我有第一部分的工作(点击一张图片，它淡出并从列表中划掉它的名字)。

我需要帮助的是检查某些图像组合是否已被点击，如果是则显示交易 div。

我在想我可以为此使用索引，但我一直无法让它工作。也许有更好的方法？感谢您的指导。

到目前为止，这是我的测试代码(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;
    }

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

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

});

Answer 1

首先你可以给你的 div 一个相应的数据值给他们的 p 元素，例如如果你实现你的 div(和所有其他 div)

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

代替

<div class="pic2"> 

你几乎可以用 jquery 写一个 oneliner

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

你可以定义你的集合: set1 = ["苹果","南瓜"]每次点击后，您都可以使用

检查点击的段落

$(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");
    //test for 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
    }
});