李によると、情報を表示するポップアップボックス

Question

私は素早く短くなります。

私は李が4つの李を持っています。それぞれの李は写真です。私は1つのdivを持っています。私のポップアップになるクラス名 "java-popup"ユーザーがクリックします。 jqueryでコードを作成しようとしていますが、ユーザーが画像をクリックするとポップアップボックスにその画像に応じた情報がポップアップ表示されます。

私の目的は、classnameを取り、そのためのポップアップを追加する汎用関数を生成することです。私は、各liに同じコードをコピー＆ペーストしたくない。

これまで：

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

現在、私のコードの問題は、すべての画像で同じ情報を持つポップアップボックスを1つ表示していることです。

ポップアップをハーココードして、私が知っているポップボックスモデルを使用するのではなく、よりよく学習できるようにしようとしています。私は、関数のこのベースを作っ

おかげ

Answer 1

は、私はそれはあなたが何をしたいのかを完了するのに役立ちますと思う：テスト用

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

そしてJSfiddle：https://jsfiddle.net/1adjx6j8/1/