2014-09-30 58 views
0

我重複下面的代碼。div的jquery循環

<div class="background1"></div> 

<i class="fa fa-share" alt="share" title="Share"></i> 
<div class="large1"> 
     <div class="ttip"> 
      <div>Here goes contents...</div> 
       <span class="note">(click here to close the box)</span> 
     </div> 
</div> 

我想顯示與類large1和背景的div。這是code(不是我的,在網上發現的)重複。

我試着做下面在第一單擊Java腳本

$('.fa-share').click(function(){ 
        $(this).next(".large1").first().html(function() { 
           $(this).prev(".background1").css({"opacity": "0.3"}).fadeIn("slow"); 
           $(this).next('.ttip').css({left: $(this).position() + '20px',top: $(this).position() + '50px'}).show(500) 
        }).fadeIn("slow"); 

        $(this).next('.note').on('click', function() { 
         $(this).prev('.ttip').hide(500); 
         $(this).prev(".background1").fadeOut("slow"); 
         $(this).prev(".large1").fadeOut("slow"); 
        }); 
       }); 

使用我曾嘗試「每()」,但沒有奏效。提前致謝。

+1

'.large1'是不是你的'i'的孩子 - 而不是'find'嘗試'。接下來(」 large1" )'' – tymeJV 2014-09-30 23:55:04

+0

搜索.next'兄弟姐妹嗎?但在我的情況下,這些不是兄弟姐妹。 – batmaniac7 2014-10-01 00:01:56

+0

在你的例子中看起來像我的兄弟姐妹 – 2014-10-01 00:02:21

回答

1

NVM 我得到它的工作。 感謝你們所有人。

$('.fa-share').click(function(){ 
         $(this).prev(".background1").css({"opacity": "0.3"}).fadeIn("slow"); 
         $(this).next(".large1").html(function() {$('.ttip').css({left: $(this).position() + '20px',top: $(this).position() + '50px'}).show(500) 
         }).fadeIn("slow"); 
        }); 
       $('.note').on('click', function() { 
        $(this).closest('.ttip').hide(500); 
        $$(this).closest(".large1").prev(".fa-share").prev(".background1").fadeOut("slow"); 
        $(this).closest(".large1").fadeOut("slow"); 
       }); 
0

它可以幫助你:

$(document).ready(function() { 
     $('.fa-share').on('click', 'a.note', function (event) { 
      event.stopPropagation(); 
      event.preventDefault(); 
      $('.large1').fadeIn(); 
      $('.background1').fadeIn(); 
     }); 

     $('.large1').on('click', 'span.note', function() { 
      $(this).closest('.large1').fadeOut(); 
      $('.background1').fadeOut(); 
     }); 
    }); 

<div class="background1" style="display:none;"> 
    <p>here's some text</p> 
</div> 

<i class="fa fa-share" alt="share" title="Share"> 
    <a href="#" class="note">click to show large1 and background1</a> 
</i> 
<div class="large1" style="display:none;"> 
    <div class="ttip"> 
     <div>Here goes contents...</div> 
     <span class="note">(click here to close the box)</span> 
    </div> 
</div> 

P.S 我認爲你沒有關於jQuery和JavaScript的基礎知識。我建議你看看這個頁面: https://www.codeschool.com/courses/try-jquery並學習這門課程。它會給你很多關於js/jquery基本級別的知識。 (如果上面的鏈接不工作搜索谷歌:codechool tryjquery當然免費基本1級)