4

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

});
4

2 回答 2

3

首先,您可以为您的 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 = ["apple","pumpkin"] 每次点击后你可以检查点击的段落

$(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
    }
});
于 2013-10-22T20:57:24.287 回答
1

创建自定义事件:

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

仅当达到适当的点击次数时才会触发此事件。这是您给我的 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');
});

不知道你是否需要它,我想我会包括它以防万一。这是一个更新的 jsFiddle 以显示该案例有效

于 2013-10-22T20:25:19.400 回答