Here is a similar piece of code I am working on right now:

<div class="gallery-category">
    <h2 data-gallery="Exterior">
        <span class="gallery-back"></span>
        Exterior
    </h2>
    <div class="gallery-items-wrap">
        <div class="gallery-image-tile">
            <div class="gallery-img" data-analytics="photo-click">
                <picture>
                    <source srcset="/content/image/image1.jpg">
                </picture>
            </div>
        </div>
    </div>
</div>

<div class="gallery-category">
    <h2 data-gallery="Interior">
        <span class="gallery-back"></span>
        Interior
    </h2>
    <div class="gallery-items-wrap">
        <div class="gallery-image-tile">
            <div class="gallery-img" data-analytics="photo-click">
                <picture>
                    <source srcset="/content/image/image2.jpg">
                </picture>
            </div>
        </div>
    </div>
</div>

I have to get the value Exterior if I click on the image image1.jpg. I created the data attribute data-gallery and was trying to get the value by using $('[data-gallery]').data("gallery") but getting only the first value.

What I need looks something like this :

Clicking on image1 getting the value 'Exterior'.

Clicking on image2 getting the value 'Interior'.

Thanks in advance

Here is a similar piece of code I am working on right now:

<div class="gallery-category">
    <h2 data-gallery="Exterior">
        <span class="gallery-back"></span>
        Exterior
    </h2>
    <div class="gallery-items-wrap">
        <div class="gallery-image-tile">
            <div class="gallery-img" data-analytics="photo-click">
                <picture>
                    <source srcset="/content/image/image1.jpg">
                </picture>
            </div>
        </div>
    </div>
</div>

<div class="gallery-category">
    <h2 data-gallery="Interior">
        <span class="gallery-back"></span>
        Interior
    </h2>
    <div class="gallery-items-wrap">
        <div class="gallery-image-tile">
            <div class="gallery-img" data-analytics="photo-click">
                <picture>
                    <source srcset="/content/image/image2.jpg">
                </picture>
            </div>
        </div>
    </div>
</div>

I have to get the value Exterior if I click on the image image1.jpg. I created the data attribute data-gallery and was trying to get the value by using $('[data-gallery]').data("gallery") but getting only the first value.

What I need looks something like this :

Clicking on image1 getting the value 'Exterior'.

Clicking on image2 getting the value 'Interior'.

Thanks in advance

• javascript
• jquery
• html

5 Answers 5

Yes you could by attaching the click to the class .gallery-img then after the click use the closest() method to go up to parents div and find the h2 element with data-gallery attribute :

$('.gallery-img picture').on('click',function(){
    $(this).closest('.gallery-category').find('h2[data-gallery]').data("gallery")
})

Hope this helps.

$('.gallery-img picture').on('click',function(){
  var gallery_data = $(this).closest('.gallery-category').find('h2[data-gallery]').data("gallery");
  
  console.log(gallery_data);
})

picture {
  width: 100px;
  height: 20px;
  border: 1px solid;
  display: block;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gallery-category">
  <h2 data-gallery="Exterior">
    <span class="gallery-back"></span>
    Exterior
  </h2>
  <div class="gallery-items-wrap">
    <div class="gallery-image-tile">
      <div class="gallery-img" data-analytics="photo-click">
        <picture>
          <source srcset="/content/image/image1.jpg">
        </picture>
      </div>
    </div>
  </div>
</div>

<div class="gallery-category">
  <h2 data-gallery="Interior">
    <span class="gallery-back"></span>
    Interior
  </h2>
  <div class="gallery-items-wrap">
    <div class="gallery-image-tile">
      <div class="gallery-img" data-analytics="photo-click">
        <picture>
          <source srcset="/content/image/image2.jpg">
        </picture>
      </div>
    </div>
  </div>
</div>

You can achieve this by placing a click event handler on the picture elements, then traversing the DOM using closest() to get the nearest .gallery-category, then find() to get the h2. Finally, data() will get you the value you require. Try this:

$('picture').click(function() {
  var text = $(this).closest('.gallery-category').find('h2').data('gallery');
  console.log(text);
});

picture {
  display: block;
  border: 1px solid #C00;
  width: 50px;
  height: 50px;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gallery-category">
  <h2 data-gallery="Exterior">
        <span class="gallery-back"></span>
        Exterior
    </h2>
  <div class="gallery-items-wrap">
    <div class="gallery-image-tile">
      <div class="gallery-img" data-analytics="photo-click">
        <picture>
          <source srcset="/content/image/image1.jpg">
        </picture>
      </div>
    </div>
  </div>
</div>

<div class="gallery-category">
  <h2 data-gallery="Interior">
        <span class="gallery-back"></span>
        Interior
    </h2>
  <div class="gallery-items-wrap">
    <div class="gallery-image-tile">
      <div class="gallery-img" data-analytics="photo-click">
        <picture>
          <source srcset="/content/image/image2.jpg">
        </picture>
      </div>
    </div>
  </div>
</div>

Try this:

$('picture').click(function() {
    // >> "Exterior"
    console.log($(this).closest('.gallery-category>h2').data('gallery')))
})

Explanation:

$(this) is the element that was clicked (i.e. the picture). So, from it we look up its parents until we find the h2 which is a direct child of an element with gallery-category class.

Try:

$('picture').click(function(){
    console.log( $(this).closest('div.gallery-items-wrap').prev().data('gallery') );
})

jsFiddle example

Can't you just map the indexes of the gallery elements to the indexes of the pictures?

var galleries = document.querySelectorAll('[data-gallery]');
var pics = document.getElementsByTagName('picture');

// Loop over the pictures
for(let i = 0; i < pics.length; ++i){
  // Set up a click event handler for each
  pics[i].addEventListener('click', function(){  
    // That grabs the corresponding index in the galleries
    console.log(galleries[i].getAttribute('data-gallery'));
  });
}

picture {width:100px;}

<div class="gallery-category">
    <h2 data-gallery="Exterior">
        <span class="gallery-back"></span>
        Exterior
    </h2>
    <div class="gallery-items-wrap">
        <div class="gallery-image-tile">
            <div class="gallery-img" data-analytics="photo-click">
                <picture>
                    <source srcset="/content/image/image1.jpg">
                    <img src="http://www.techinsights./uploadedImages/Public_Website/Content_-_Primary/Teardown/Sample_Reports/sample-icon.png" alt="MDN">
                </picture>
            </div>
        </div>
    </div>
</div>

<div class="gallery-category">
    <h2 data-gallery="Interior">
        <span class="gallery-back"></span>
        Interior
    </h2>
    <div class="gallery-items-wrap">
        <div class="gallery-image-tile">
            <div class="gallery-img" data-analytics="photo-click">
                <picture>
                    <source srcset="/content/image/image2.jpg">
                    <img src="http://www.techinsights./uploadedImages/Public_Website/Content_-_Primary/Teardown/Sample_Reports/sample-icon.png" alt="MDN">                  
                </picture>
            </div>
        </div>
    </div>
</div>