弹出框根据li

Question

我会快而短。

我有一个带有4 Li的ul，每个li是一张照片，我有一个div有一个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!");
    }
  });

目前，我的代码存在的问题是，它显示的是一个弹出框，其中包含与所有图像相同的信息。

我正在尝试对我的popbox进行编码以便我可以更好地学习，而不是使用我知道可用的popbox模型。

由于

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 for test：https://jsfiddle.net/1adjx6j8/1/