javascript - 弹框根据li查看信息

Question

我会说得又快又简短。

我有一个带有 4 个 Li 的 ul，每个 li 是一张照片，我有一个 div，根据该图像有一个包含更多信息的类名“java-popup”，这将是我的弹出窗口，当用户点击。我正在尝试在 jquery 中编写代码，当用户单击任何图像时，弹出框将根据该图像弹出信息。

拜托，我的目标是生成一个通用函数，它将接受类名并为其添加弹出窗口。我不想为每个 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:https://jsfiddle.net/1adjx6j8/1/