Javascript 如果href等于另一个div do函数的id

我有一个隐藏的div，其中包含在页面上可见的缩略图的详细信息。当你点击缩略图时，它会淡入淡入淡入淡出淡入淡出淡入淡出淡出淡入淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡

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

<div id="portfolio1" class="portfolio" hidden>Portfolio 1</div>
<div id="portfolio2" class="portfolio" hidden>Portfolio 2</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>

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

<div id="portfolio1" class="portfolio" hidden>Portfolio 1</div>
<div id="portfolio2" class="portfolio" hidden>Portfolio 2</div>

解决方案 多亏了奥斯汀的代码，我才能够修改它来和我的代码一起工作。

---

检查此处：

问题出在这个块中

if ($(".portfolio-item-details").attr("id") == "newReadMoreHREF") {
    $(this).fadeIn();
}

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

<div id="portfolio1" class="portfolio" hidden>Portfolio 1</div>
<div id="portfolio2" class="portfolio" hidden>Portfolio 2</div>

因为您有两个错误，第一个错误是newReadMoreHREF是一个变量，而不是HTML中的字符串或任何变量的值，依此类推

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

<div id="portfolio1" class="portfolio" hidden>Portfolio 1</div>
<div id="portfolio2" class="portfolio" hidden>Portfolio 2</div>

第二件事是，在变量声明中，您使用的是portfolio+i；，如果您要选择一个元素，这将是很好的。但是在jQuery iif语句中与.attr'id'一起使用它将再次造成严重破坏

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

<div id="portfolio1" class="portfolio" hidden>Portfolio 1</div>
<div id="portfolio2" class="portfolio" hidden>Portfolio 2</div>

你需要的是这样的东西

$(".open-portfolio-item-details").each(function(){
  i++;
  var newReadMoreHREF="portfolio"+i; // removed #
  $(this).attr("href",newReadMoreHREF);
  $(this).val(i);
  if ($(".portfolio-item-details a").attr("id") == newReadMoreHREF) {
    // you need to access the hyperlink in the element, not
    // the element itself. this portfolio1 ID is of a hyperlink
    // again here, this is referencing the main iterator. 
    $(this).fadeIn();
    // are you sure you want to fade the .open-portfolio-item-details?
  }
});

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

<div id="portfolio1" class="portfolio" hidden>Portfolio 1</div>
<div id="portfolio2" class="portfolio" hidden>Portfolio 2</div>

---

删除哈希符号，然后调用变量值进行检查。如果条件为true，则它将执行为true

你想要这样的东西吗

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

<div id="portfolio1" class="portfolio" hidden>Portfolio 1</div>
<div id="portfolio2" class="portfolio" hidden>Portfolio 2</div>

HTML

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

<div id="portfolio1" class="portfolio" hidden>Portfolio 1</div>
<div id="portfolio2" class="portfolio" hidden>Portfolio 2</div>

你甚至不需要为ID而烦恼，只要每个图像下面的下一个div是它的详细信息。

试试这个：

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

<div id="portfolio1" class="portfolio" hidden>Portfolio 1</div>
<div id="portfolio2" class="portfolio" hidden>Portfolio 2</div>

HTML: 所容纳之物

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

<div id="portfolio1" class="portfolio" hidden>Portfolio 1</div>
<div id="portfolio2" class="portfolio" hidden>Portfolio 2</div>

由于某种原因，无法获取小提琴链接

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

<div id="portfolio1" class="portfolio" hidden>Portfolio 1</div>
<div id="portfolio2" class="portfolio" hidden>Portfolio 2</div>

编辑：

---

我不知道显示您想要显示的内容的类的名称，所以作为一个示例，我使用的是公文包。试着把这段代码放到小提琴中

我在你的代码中根本找不到开放模式。这对我来说是一件令人困惑的事情。你是想把newReadMoreHREF加上引号吗？这是一个变量。另外，您可能不希望在该变量中包含，因为这是id选择器，而不是实际id的一部分。@AfzaalAhmadZeeshan对此表示抱歉，我修改了此处的代码，以便大家易于理解，但忘记将.open model替换为.open portfolio item details。我刚刚编辑了。@user3256132，但有点困惑。从我读到的内容来看，您希望单击图像，然后显示详细信息，对吗？austin说的是id类的用法，而不是HREF。这很好，但由于我的标记不同，因此无法工作。我正在使用wordpress创建一个带有自定义字段的循环，所有公文包div都放在body hidden的正下方，缩略图显示在标记的其他地方。你有什么建议？好吧，长话短说，你需要别的东西，而不是。下一步要找到它们？是的，这样想。如果href链接到ID，那么fadeIn ID。希望您能理解这一点。感谢Austin，您的代码让我了解了如何使用我的标记。在这里查看我所做的100%工作：@jdoimedios23干得好，很高兴我能帮上忙！

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

<div id="portfolio1" class="portfolio" hidden>Portfolio 1</div>
<div id="portfolio2" class="portfolio" hidden>Portfolio 2</div>