Popup-Box, um Informationen nach der li anzuzeigen

Question

Ich werde schnell und kurz sein.

Ich habe eine ul mit 4 Li, jedes li ist ein Foto und ich habe 1 haben ein div mit mehr Informationen nach diesem Bild mit einem Klassennamen "Java-Popup", die mein Popup sein wird, das Pop-up wenn Der Benutzer klickt. Ich versuche in jQuery zu codieren, dass, wenn ein Benutzer auf irgendein Bild klickt, das Popup-Fenster mit Informationen entsprechend diesem Bild auftaucht.

Bitte, mein Ziel ist es, eine generische Funktion zu erzeugen, die Klassennamen übernimmt und Popup dafür hinzufügt. Ich möchte nicht den gleichen Code für jedes li kopieren und einfügen.

bisher:

HTML

<section id="java-projects"> 
 
    <!-- java-projects --> 
 
    <div class="java-container"> 
 
    <h1>Projects</h1> 
 
    <ul class="java-projects-gallery" id="gallery"> 
 
     <!-- ========= li ========= --> 
 
     <li id="1"> 
 
     <div class="item-img"> 
 
      <img alt="Ink Transition Effect" src="img/HQCLogo.svg"> 
 
     </div> 
 
     <div class="item-info light-bg" style="background-color: rgb(241, 241, 241)"> 
 
      <a href="http://www.hqcglobal.com"><em>HQCGlobal</em></a> <i class="date">March 12, 2015</i> 
 
     </div> 
 
     <div class="feed" id="feed1"> 
 
      <div class="heart" id="like1" rel="like"></div> 
 
      <div class="likeCount" id="LikeCount1"></div> 
 
     </div> 
 
     </li> 
 
     <!-- ========= li ========= --> 
 
     <li id="2"> 
 
     <div class="item-img"> 
 
      <a href="http://fullstackdeveloper.co"> 
 
      <img alt="Products Comparison Table" src="img/ChiChi.svg"> 
 
      </a> 
 
     </div> 
 
     <div class="item-info light-bg" style="background-color: rgb(241, 241, 241); position: relative;"> 
 
      <a href="http://fullstackdeveloper.co"><em>ChiChi Logo</em></a> 
 
      <i class="date">February 11, 2016</i> 
 
     </div> 
 
     <div class="feed" id="feed2"> 
 
      <div class="heart" id="like2" rel="like"></div> 
 
      <div class="likeCount" id="LikeCount2"></div> 
 
     </div> 
 
     </li> 
 
     <!-- ========= li ========= --> 
 
     <li id="3"> 
 
     <div class="item-img"> 
 
      <a href="http://fullstackdeveloper.co"> 
 
      <img alt="Products Comparison Table" src="img/Gina.svg"> 
 
      </a> 
 
     </div> 
 
     <div class="item-info light-bg" style="background-color: rgb(241, 241, 241);position: relative;"> 
 
      <a href="http://fullstackdeveloper.co"><em>Angelic Logo 
 
      Praying</em></a> <i class="date">April 4, 2016</i> 
 
     </div> 
 
     <div class="feed" id="feed3"> 
 
      <div class="heart" id="like3" rel="like"></div> 
 
      <div class="likeCount" id="LikeCount3"></div> 
 
     </div> 
 
     </li> 
 
     <!-- ========= li ========= --> 
 
     <li id="4"> 
 
     <div class="item-img"> 
 
      <a href="http://fullstackdeveloper.co"> 
 
      <img alt="Products Comparison Table" src="img/Mashoom.svg"> 
 
      </a> 
 
     </div> 
 
     <div class="item-info light-bg" style="background-color: rgb(241, 241, 241);position: relative;"> 
 
      <a href="http://fullstackdeveloper.co"><em>M Logo</em></a> 
 
      <i class="date">May 9, 2016</i> 
 
     </div> 
 
     <div class="feed" id="feed3"> 
 
      <div class="heart" id="like4" rel="like"></div> 
 
      <div class="likeCount" id="LikeCount4"></div> 
 
     </div> 
 
     </li> 
 
     <!-- ========= li ========= --> 
 
    </ul> 
 
    </div> 
 
</section> 
 
<!-- \java-projects -->

Js

$('#gallery li').on('click', function(event) { 
 
    var id = this.id; 
 
    if ($('.java-popup').hasClass(id)) { 
 
     event.preventDefault(); 
 
     value = $(".java-popup").attr("class").split(' ')[1]; 
 
     a = "." + value; 
 
     console.log($(a).addClass('is-visible')); 
 
     //$(value).addClass('is-visible'); 
 
    } else { 
 
     alert("Lost!"); 
 
    } 
 
    });

Momentan besteht das Problem mit meinem Code darin, dass es ein Popup-Fenster mit den gleichen Informationen mit allen Bildern anzeigt.

Ich versuche meine Popbox zu harcodieren, damit ich besser lernen kann, anstatt ein Popbox-Modell zu verwenden, von dem ich weiß, dass es verfügbar ist.

Dank

Answer 1

ich diese Basis-Funktion aus, ich denke, es Ihnen, was Sie tun möchten, beenden helfen:

$('document').ready(function(){ 
    $('#gallery li').on('click', function(event) { 
     var img = $(this).find('img'); 
     alert($(img).attr('alt') + " | li id => " + $(this).attr('id')); 
    }); 
}); 

Und die JSfiddle für den Test: https://jsfiddle.net/1adjx6j8/1/