Selecting a specific element and attaching a particular class to this element, but directing it towards a different element that shares the same index in a separate node list

Question

Selecting a specific element and attaching a particular class to this element, but directing it towards a different element that shares the same index in a separate node list

I am working on a project where I have two sets of identical images - one is displayed in a gallery format and the other set is hidden until its corresponding gallery image is clicked, creating a lightbox effect.

For example:

<ul id="gallery">
    <li><img class="gallery-image" src="dog"></li>
    <li><img class="gallery-image" src="cat"></li>
    <li><img class="gallery-image" src="rabbit"></li>
</ul>

<ul id="modal">
    <li><img class="modal-image" src="dog"></li>
    <li><img class="modal-image" src="cat"></li>
    <li><img class="modal-image" src="rabbit"></li>
</ul>

I have written a script that loops over the gallery images and adds an event listener to each image. The goal is to be able to add a class to the corresponding "modal-image" when a "gallery-image" is clicked.

Both sets of images are in the same order and have matching indexes when retrieved as nodelists using document.getElementsByClassName (with different variable names like galleryImage[0] and modalImage[0]). My question is: Is there a method to automatically add a class to the corresponding "modal-image" when clicking a "gallery-image" using the nodelist?

If anyone has a solution, I would appreciate a detailed explanation of the logic behind it. I have seen examples that involve assigning IDs with index numbers to each image, but I would like to keep all the JavaScript in one file and understand how to work with nodelists effectively.

Thank you for your help!

javascript events nodelist

Answer 1

Answer №1

Your query seems to revolve around the following question: "How can I establish the index of a DOM element within a NodeList, given a reference to the element?" Once you have the index, the process of obtaining the corresponding element in another list becomes straightforward.

To achieve this, you can utilize the array .indexOf() method or employ .call() to apply this method on a NodeList:

var index = Array.prototype.indexOf.call(galleryImages, elementToFind)

The resulting value in index will represent the sought-after element's index. Subsequently, modalImages[index] corresponds to the item in the other list.

In addition, although it diverges from your initial inquiry, instead of attaching click handlers individually to each image, consider linking a single handler to the encompassing UL element. Inside this handler, evaluate the event.target to ascertain whether it belongs to an IMG element. This practice, known as delegated event handling, leverages bubbling of click events through parent elements, enabling management of clicks on gallery IMG elements at the UL level.

For illustrative purposes, upon clicking, I am assigning a selected class that renders the respective item yellow while removing any prior selections.

// Obtain references for the UL elements:
var galleryContainer = document.getElementById("gallery")
var modalContainer = document.getElementById("modal")

// Retrieve lists of IMG elements:
var galleryImages = galleryContainer.querySelectorAll(".gallery-image")
var modalImages = modalContainer.querySelectorAll(".modal-image")

// Attach click handler to the gallery UL:
galleryContainer.addEventListener("click", function(event) {
  // If the click target does not pertain to the specified element, immediately exit
  if (event.target.tagName.toLowerCase() != "img") 
    return
  
  // Check for an existing .selected element; remove its class if present
  var currentSelected = document.querySelector(".selected")
  if (currentSelected)
    currentSelected.classList.remove("selected")
  
  // Determine the index of the current IMG in the list and derive the corresponding item in the alternative list using said index
  var index = Array.prototype.indexOf.call(galleryImages, event.target)
  modalImages[index].classList.add("selected")
});

.selected { background-color: yellow; }

<ul id="gallery">
    <li><img class="gallery-image" src="dog" alt="dog"></li>
    <li><img class="gallery-image" src="cat" alt="cat"></li>
    <li><img class="gallery-image" src="rabbit" alt="rabbit"></li>
</ul>
<ul id="modal">
    <li><img class="modal-image" src="dog" alt="dog"></li>
    <li><img class="modal-image" src="cat" alt="cat"></li>
    <li><img class="modal-image" src="rabbit" alt="rabbit"></li>
</ul>

Answer 2

Your query seems to revolve around the following question: "How can I establish the index of a DOM element within a NodeList, given a reference to the element?" Once you have the index, the process of obtaining the corresponding element in another list becomes straightforward.

To achieve this, you can utilize the array .indexOf() method or employ .call() to apply this method on a NodeList:

var index = Array.prototype.indexOf.call(galleryImages, elementToFind)

The resulting value in index will represent the sought-after element's index. Subsequently, modalImages[index] corresponds to the item in the other list.

In addition, although it diverges from your initial inquiry, instead of attaching click handlers individually to each image, consider linking a single handler to the encompassing UL element. Inside this handler, evaluate the event.target to ascertain whether it belongs to an IMG element. This practice, known as delegated event handling, leverages bubbling of click events through parent elements, enabling management of clicks on gallery IMG elements at the UL level.

For illustrative purposes, upon clicking, I am assigning a selected class that renders the respective item yellow while removing any prior selections.

// Obtain references for the UL elements:
var galleryContainer = document.getElementById("gallery")
var modalContainer = document.getElementById("modal")

// Retrieve lists of IMG elements:
var galleryImages = galleryContainer.querySelectorAll(".gallery-image")
var modalImages = modalContainer.querySelectorAll(".modal-image")

// Attach click handler to the gallery UL:
galleryContainer.addEventListener("click", function(event) {
  // If the click target does not pertain to the specified element, immediately exit
  if (event.target.tagName.toLowerCase() != "img") 
    return
  
  // Check for an existing .selected element; remove its class if present
  var currentSelected = document.querySelector(".selected")
  if (currentSelected)
    currentSelected.classList.remove("selected")
  
  // Determine the index of the current IMG in the list and derive the corresponding item in the alternative list using said index
  var index = Array.prototype.indexOf.call(galleryImages, event.target)
  modalImages[index].classList.add("selected")
});

.selected { background-color: yellow; }

<ul id="gallery">
    <li><img class="gallery-image" src="dog" alt="dog"></li>
    <li><img class="gallery-image" src="cat" alt="cat"></li>
    <li><img class="gallery-image" src="rabbit" alt="rabbit"></li>
</ul>
<ul id="modal">
    <li><img class="modal-image" src="dog" alt="dog"></li>
    <li><img class="modal-image" src="cat" alt="cat"></li>
    <li><img class="modal-image" src="rabbit" alt="rabbit"></li>
</ul>

Selecting a specific element and attaching a particular class to this element, but directing it towards a different element that shares the same index in a separate node list

Answer №1

Similar questions

Creating a loop in a column-based carousel without using JavaScript

Verify whether a group of div elements overlaps a fixed div while scrolling

In what way can the button display the permission directly on the page?

Retrieve information from child components and populate form fields

The tablet is having trouble playing the mp3 audio file

Troubleshooting a problem with AJAX returning the data

Error Encountered: Unable to Locate 'bootstrap' label in Bootstrap 5 Popover

React Material-UI components (Slider/Select) "onChange" event does not update the value instantly, it shows the result of the previous click

Mastering the control of a camera in three.js using a combination of keyboard and mouse navigation techniques

Fulfill the promise in AngularJS and assign it to a different factory

Find elements that are not contained within an element with a specific class

Adding a unique value to an array using JQuery when it does not already exist

Using the "number" input type gives the user the ability to easily remove numbers and leave the input field

Upon clicking the link, the JavaScript functionality failed to activate

Surprise mistake: Jade's error with the length

Utilizing the Power of GrapesJs in Vue3

Scripts in iframes within webviews are not preloading and executing properly

Substitute the comma with a space

Adding a fresh HTML element to a list at a designated location

An issue arises in Node.js and MongoDB where data is being returned from the previous update instead of the most