解

Question

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

我已经为每个＆＃34; .portfolio-item-details＆＃34;设置了jquery递增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>

由于这是动态完成的，我如何使用jquery fadeIn或slideUp＆＃34; .portfolio-item-details＆＃34;如果href等于ID。基本上缩略图＆＃34;＃portfolio1＆＃34;应该用＆＃34;＃portfolio1＆＃34;向上滑动div。点击。

这是我的jquery代码，用于添加ID和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();
      }
 });
});

解

感谢奥斯汀的代码，我能够将其修改为与我合作。点击此处：http://jsfiddle.net/jdoimeadios23/xpsrLyLz/

Answer 1

问题在于此块

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

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

第二件事是，在变量声明中你正在使用"#portfolio"+i;，如果你要选择一个元素，这将是好的。但是在带有.attr('id')的jQuery iif语句中使用它将再次造成破坏。

你需要的是这样的东西

$(".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?
  }
});

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

Answer 2

你想要这样的东西吗？

<强> 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。

Answer 3

试试这个： 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>

Jquery的：

$('a.open-portfolio-item-details').on('click', function (e) {
    e.preventDefault();
    var id = $(this).attr('href');
    $('.portfolio').hide();
    $('.portfolio' + id).fadeIn();
});

出于某种原因无法获得小提琴链接。

编辑：我不知道显示您想要显示的内容的类的名称，所以作为一个例子，我正在使用投资组合。尝试将此代码放入小提琴中

如果href等于另一个div的id执行功能

解

3 个答案: