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

Question

I have a hidden div with the details of a thumbnail that is visible on the page. When you click on the thumbnail, it should fadein or slideup the div with details.

I have set with jquery incremented ID's to each ".portfolio-item-details" to identify each one and then have set with jquery the same ID's to the href of the thumbnail.

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

Since this is done dynamically, how can I with jquery fadeIn or slideUp the ".portfolio-item-details" if the href is equal to the ID. Basically thumbnail with "#portfolio1" should slide up the div with "#portfolio1" on click.

This is my jquery code which to add the IDs and HREF is working perfectly but not working to slideUp or fadeIn the div with the same ID.

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

SOLUTION

Thanks to Austin's code, I was able to modify it to work with mine. Check here: http://jsfiddle.net/jdoimeadios23/xpsrLyLz/

Answer 1

The problem is in this block

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

Because you're having two errors, the first one is that newReadMoreHREF is a variable, not a string in your HTML or a value to any variable and so on.

Second thing is, that in the variable declaration you're using "#portfolio"+i; , which would be good if you were about to select an element. But using it in the jQuery iif statement with .attr('id') will again cause a havoc.

The thing that you need is something like this

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

Removed the hash sign and then called the variable value to check against. It would execute to be true if the condition is true.

Answer 2

You want something like this?

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

You don't even need to bother with ID's so long as the next div below each image is it's details.

Answer 3

Try this: HTML: content

<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();
});

Couldn't get the fiddle link for some reason.

Edit: I don't know the name of the class that shows the content you want displayed, so as an example I'm using portfolio. Try putting this code into a fiddle