javascript - 如果 href 等于另一个 div 的 id 函数

Question

我有一个隐藏的 div，其中包含页面上可见的缩略图的详细信息。当您单击缩略图时，它应该淡入或向上滑动包含详细信息的 div。

我已经用 jquery 为每个“.portfolio-item-details”设置了递增的 ID 来标识每个，然后用 jquery 为缩略图的 href 设置了相同的 ID。

<section id="portfolio1" class="portfolio-item-details hidden">content</section>
<a class="open-portfolio-item-details" href="#portfolio1" title="">
  <img src="thumbnail.jpg">
</a>
<section id="portfolio2" class="portfolio-item-details hidden">content</section>
<a class="open-portfolio-item-details" href="#portfolio2" title="">
  <img src="thumbnail.jpg">
</a>

由于这是动态完成的，如果 href 等于 ID，我如何使用 jquery fadeIn 或 slideUp 来获取“.portfolio-item-details”。基本上带有“#portfolio1”的缩略图应该在点击时向上滑动带有“#portfolio1”的 div。

这是我添加 ID 的 jquery 代码，HREF 工作正常，但无法使用相同的 ID 滑动或淡入 div。

$(document).ready(function () {    
 var i=0;
 $(".portfolio-item-details").each(function(){
      i++;
      var newID="portfolio"+i;
      $(this).attr("id",newID);
      $(this).val(i);
 });
 var i=0;
 $(".open-portfolio-item-details").each(function(){
      i++;
      var newReadMoreHREF="#portfolio"+i;
      $(this).attr("href",newReadMoreHREF);
      $(this).val(i);
      if ($(".portfolio-item-details").attr("id") == "newReadMoreHREF") {
        $(this).fadeIn();
      }
 });
});

解决方案

多亏了 Austin 的代码，我才能够修改它以适用于我的代码。在这里查看:http://jsfiddle.net/jdoimeadios23/xpsrLyLz/

Answer 1

你想要这样的东西吗？

HTML

<div class="image" value="1">
    <img src="thumbnail.jpg" />
</div>
<div id="portfolio1" class="details">details</div>

<div class="image"  value="2">
    <img src="thumbnail.jpg" />
</div>
<div id="portfolio2" class="details">more details</div>

JS

$(document).ready(function () {
    $('.details').fadeOut(1);

    $(".image").click(function () {
        var num = $(this).attr("value");
        $("#portfolio"+num).fadeIn(1000);
    });
});

JSFiddle Demo

只要每张图片下方的下一个 div 是它的详细信息，您甚至不需要为 ID 操心。