jquery loop for div

Question

У меня есть следующий код в повторе.

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

Я хочу показать div с классом large1 и фоном. Это 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"); 
        }); 
       }); 

Я попытался с помощью «.each()» на первый клик, но не работает. Заранее спасибо.

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

Answer 2

это может помочь вам:

$(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. (Если верхняя ссылка не будет работать, выполните поиск по google: codeschool tryjquery course free basic level 1)