只有在特定的其他div被點擊時才顯示div

Question

我是jQuery新手（這是我的第二次嘗試）。我通過谷歌和StackOverflow尋找答案，我嘗試了很多，但還沒有弄清楚我的問題的最後部分。任何幫助或指導最受讚賞。

我想要做的是有一堆圖像（蘋果，南瓜，蠟燭等），當點擊時，淡出圖像，然後將文字列表中的圖像名稱截掉。然後，如果您點擊這些圖片的特定集合，它們將顯示包含交易的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

創建一個自定義事件：

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

然後與其他點擊觸發它：

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

這顯然supergeneralized，但它提供了觸發你想要的事件所必需的框架。

編輯

好了，所以你需要存儲需要點擊每個值，以及所需的總。我總是喜歡使用基於對象的變量，而不是全局，那麼：

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。

Answer 2

首先你可以給你的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 =「蘋果」，「南瓜」] 和後每點擊可以查看點擊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 
    } 
});