Update the picture dynamically when hovering

Is there a way to change an image randomly when hovering over it? The hover effect is working fine, but the image does not revert back when the mouse moves out. Any suggestions on how to fix this?

var arr = ["020", "053", "306", "035", "930"];

function getRandomImage() {
  var index = Math.floor(Math.random() * arr.length);

  return arr[index];

}

$(function(){
$(".size-woocommerce_thumbnail").hover(function(){
    var image = getRandomImage();
    $(this).attr("srcset", function(index, attr){
        return attr.replace("070", image);
    });
    $(this).attr("src", function(index, attr){
        return attr.replace("070", image);
    });
}, function(){
    $(this).attr("srcset", function(index, attr){
        return attr.replace(image, "070");
    });
    $(this).attr("src", function(index, attr){
        return attr.replace(image, "070");
    });
});
});

Answer №1

Is there any error displayed on the console? It seems that the scope of var image = getRandomImage(); is within the callback function triggered on hover, causing image to be undefined when the second function runs on mouseout.

One solution could be to store the value of image in a data-* attribute and retrieve it on mouseout. Here's an example:

$(".size-woocommerce_thumbnail").hover(function(){
  var $this = $(this);
  var image = getRandomImage();
  $this.attr("srcset", function(index, attr){
    return attr.replace("070", image);
  });
  $this.attr("src", function(index, attr){
    return attr.replace("070", image);
  });
  $this.data('image', image);
}, function(){
  var $this = $(this);
  var image = $this.data('image');
  $this.attr("srcset", function(index, attr){
      return attr.replace(image, "070");
  });
  $this.attr("src", function(index, attr){
      return attr.replace(image, "070");
  });
});

Additionally, consider saving the value of $(this) instead of calling it repeatedly to prevent recreating the jQuery object. Chaining functions can also help optimize your code.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

ng-repeat not displaying any content

I am trying to create a form where users can input extra information by adding new rows, but I am struggling with generating the first row <div ng-repeat="row in rows"> <input type="text" placeholder="name"><input type="tel" placeholder="te ...

Exploring Angular 2 Routing across multiple components

I am facing a situation where I have an app component with defined routes and a <router-outlet></router-outlet> set. Additionally, I also have a menu component where I want to set the [routerLink] using the same routes as the app component. How ...

Web Scraping ASU Courses using Node.js

I'm a beginner when it comes to Node.js, so please forgive me if I sound confused. Currently, I am attempting to scrape course information from ASU's course catalog (https://webapp4.asu.edu/catalog/) using tools like Zombie, Node.IO, and the HTT ...

Persisting Undefined Values Even After Proper Prop Passing

I'm currently working on fetching and passing coaching data as props to another component for rendering on the frontend. I need to pass these props to the CoachingCard Component in order to display the coaching values. However, I'm encountering ...

What is the best way to implement the populate method in Node.js when working with MongoDB?

Here is the code snippet I am working with: const Order = require('../../models/order'); const Product = require('../../models/product'); Order.find({}, '_id product quantity', function(err, result) { if (result) { con ...

The scroll bar will be automatically reset once the content inside is updated by using the $selector.html() function

I am looking to create a dynamic scrollable content feature. Initially, I retrieve the data and set the content as follows: $("#sub_menu li").on("click", function () { $("#gallery").html(get_html($(this).attr("id"))); $("#gallery").cs ...

HTML Menu with Ajax functionality designed to work seamlessly without relying on JavaScript

I'm working on making my navigation system compatible with both clients who have JavaScript disabled and those who can use Ajax. Currently, I have dynamic links generated inside the navigation like "index.php?page=/cat/page.php". <li id="sidebarit ...

Tips for maintaining a user's session post-login with Passport and Express JS

I recently set up a node backend using express and integrated Passport for authentication purposes. My application has a route called /login for logging in and another route called /me to retrieve information about the currently logged in user. Below is t ...

Issue with setting and showing the PHP data array within the vue.js variable

I am encountering an issue with transferring an array of data from a PHP session variable to a Vue.js variable Here is how I am trying to assign an array of data to a Vue.js variable: permissions:['<?php echo json_encode($_SESSION['permission ...

Is there a simple method in JavaScript to combine, structure, and join numerous multi-dimensional arrays in a specific manner (from right to left)?

Looking for a simple solution to merge, flatten, and concatenate multiple multi-dimensional arrays in JavaScript in a specific manner (from right to left) # Example [['.class1', '.class2'], ['.class3', ['.class4', & ...

Using jQuery to parse JSON transforms an array into a hash object

I recently encountered an issue with a string that I needed to convert into a JSON object. The string looked like this: string = '{ "key": [ { "foo": "bar" } ] }'; To convert the string, I used: json = $.parseJSON(string); However, after co ...

Limit the number of browser tabs in which users can access the Web Application Options Link

Our online B2B application, developed using ASP.NET webforms on .Net framework 4.7.2, needs to limit users to opening only 3 to 4 tabs in their browser simultaneously. This restriction is necessary to manage server load due to a large number of active user ...

There was an error due to a TypeError: The 'page' property cannot be read because it is undefined

Can anyone assist me with an Angular issue I'm facing? I've been working on integrating server-side pagination, but no matter how many times I revise my code, I keep encountering the same error message: ERROR TypeError: Cannot read properties o ...

Managing dynamic input texts in React JS without using name properties with a single onChange function

Dealing with multiple onChange events without a predefined name property has been challenging. Currently, one text input controls all inputs. I have come across examples with static inputs or single input functionality, but nothing specifically addressin ...

When transitioning between views in Angular App, it freezes due to the large data response from an HTTP request

I am encountering an issue with my Angular 9.1.11 application where it freezes after navigating from one page to another (which belongs to a different module with lazy loading). Here is the scenario: There is an action button called View Report that re ...

Tips for preventing child elements from becoming distorted when the parent element is resized

How can I prevent rotated child elements from skewing when the parent element is scaled? Here is the code snippet that I am working with: <svg viewbox="0 0 500 500"> <g class="parent" transform="matrix(1.71341 0 0 1 -42.302 0)"> <path ...

What is the best way to extract text/html that appears between two consecutive <input> tags?

Is there a straightforward method to extract the text or HTML content located between input tags, even though these tags do not require closing tags? For instance, in the example below, I am looking to retrieve <b>Bob and Tim</b><br>Tim & ...

Discovering the total of varying inputs in ReactJS

//this is the API response: { "message": "success", "code": 100, "data": { "inCourseCategories": [ { "_id": "62b842f09184bf2330e6f506", "course": "601a67e6db65fb15946e6b6f ...

What is the best way to incorporate my Switch component into my Table component as a distinct column, while also maintaining separate states for each component?

My journey into learning React.js has been exciting so far. However, I am facing some confusion when it comes to stateful components. Currently, I am utilizing Bootstrap tables for creating a table and successfully fetching data using GET requests. Additio ...

leveraging a callback function alongside the useState hook

I'm facing an issue with the change() function. My goal is to call the filteredData() function after the setState operation is completed. Typically, I would use a callback function for this task, but useState doesn't support callbacks. Using useE ...