Question

我是jQuery的新手（这是我的第二次尝试）。我通过谷歌和StackOverflow寻找答案，我已经尝试了很多，但尚未找出问题的最后部分。非常感谢任何帮助或指导。

我想要做的是有一堆图像（苹果，南瓜，蜡烛等），点击后，将图像淡出，然后在文本列表中划掉图像的名称。然后，如果您点击这些图像的特定集合，他们将显示包含交易的div。

一个例子：如果你点击苹果，梨和南瓜（任何顺序）的图像，将显示一笔交易。 另一个例子：您点击蜡烛，苹果，南瓜和钥匙（按任意顺序）的图像，交易将显示。另一个例子：您点击交易显示的所有图像项目（按任何顺序）。

我让第一部分工作（点击一个图像，它淡出并从列表中删除其名称）。

我需要帮助的是检查是否已点击某些图像组合，如果是，则显示交易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（和所有其他div），你可以给你的div一个相应的数据值给他们的p项目

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

而不是

<div class="pic2">

你可以用jquery

写一个几乎oneliner

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

你可以定义你的套装： set1 = [“apple”，“pumpkin”] 每次点击后，您都可以使用

查看点击的paragraphes

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

Answer 2

创建自定义事件：

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

然后用另一个点击触发它：

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

这显然是超广义的，但它提供了触发所需事件所必需的框架。

修改

好吧，所以你需要存储所需点击的每个值，以及所需的总数。我总是喜欢使用基于对象的变量而不是全局变量，所以：

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

这会为每笔交易创建数组，第一个是已发生的点击次数，第二个是所需的总数减去1.然后，您将增加“已发生的点击次数”值，并阻止其允许双击，由后面描述的JS。首先，我建议为所有可点击的项目添加通用类，以及与之关联的交易项目，并验证这种方式。 HTML：

<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">

我描述的JS：

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

最后if用于所有单击的元素，因此不需要添加类和检查。最后一部分抓取相关的数据属性并将其打开。

现在你只是触发事件：

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

只有在达到适当的点击次数后才会触发此事件。 Here is the jsFiddle您向我提供了最新信息，表明它按照要求正常运作。

如果您只想允许一笔交易，您只需在触发后关闭该事件：

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

不确定你是否需要它，我想包括它以防万一。 Here is an updated jsFiddle to show that case working

仅在单击特定其他div时显示div

2 个答案: