Adjusting the image in JavaScript and jQuery

Question

Adjusting the image in JavaScript and jQuery

Within a group of span elements, there are img tags nested inside.

<span id = "span1" class="span-class">
    <img src="img.jpg"/>
</span>
<!--Several more similar span elements -->
<span id = "span123" class="span-class">
    <img src="img.jpg"/>
</span>

The image img.jpg is the default image displayed when the page first loads. I want this default image to be replaced with first_clicked_img.jpg when I click on a span for the first time. Subsequently, I would like first_clicked_img.jpg and second_clicked_img.jpg to switch places each time I click on a different span. How can this functionality be achieved using jQuery, or if simpler, with pure js?

javascript jquery html css

Answer 1

Answer №1

To make the functionality work, attach an `onclick` event to your `span` element. When the event is triggered, you should hide the `#span1` and display the `#span123`.

Similarly, for the reverse action, when clicking on the `#span123`, hide `span123` and show `#span1`.

Best regards

Answer 2

To make the functionality work, attach an `onclick` event to your `span` element. When the event is triggered, you should hide the `#span1` and display the `#span123`.

Similarly, for the reverse action, when clicking on the `#span123`, hide `span123` and show `#span1`.

Best regards

Answer 3

Answer №2

$(".span-class").click(function() {
    var image = $(this).find("img");
    var updated_src;
    switch (image.attr("src")) {
        case "original_img.jpg":
        case "alternate_img.jpg":
            updated_src = "new_img.jpg";
            break;
        case "new_img.jpg":
            updated_src = "alternate_img.jpg";
            break;
    }
    image.attr("src", updated_src);
});

Answer 4

$(".span-class").click(function() {
    var image = $(this).find("img");
    var updated_src;
    switch (image.attr("src")) {
        case "original_img.jpg":
        case "alternate_img.jpg":
            updated_src = "new_img.jpg";
            break;
        case "new_img.jpg":
            updated_src = "alternate_img.jpg";
            break;
    }
    image.attr("src", updated_src);
});

Answer 5

Answer №3

It seems like you're trying to achieve the functionality where the image changes to first_clicked_img on the first click and then to second_clicked_img on the second click. Here's a solution that can help you with this:

let clicks = 0;
$('span').on('click', function(){
    if(clicks === 0){
        clicks = 1;
        $(this).find('img').attr('src','first_clicked_img.jpg');
    } else if(clicks === 1){
        clicks = 0;
        $(this).find('img').attr('src','second_clicked_img.jpg');

    }
});

I have reset the value of clicks to 0 in the second if statement so that subsequent clicks on span will toggle between the two images as per your requirement. Does this solve your query?

Answer 6

It seems like you're trying to achieve the functionality where the image changes to first_clicked_img on the first click and then to second_clicked_img on the second click. Here's a solution that can help you with this:

let clicks = 0;
$('span').on('click', function(){
    if(clicks === 0){
        clicks = 1;
        $(this).find('img').attr('src','first_clicked_img.jpg');
    } else if(clicks === 1){
        clicks = 0;
        $(this).find('img').attr('src','second_clicked_img.jpg');

    }
});

I have reset the value of clicks to 0 in the second if statement so that subsequent clicks on span will toggle between the two images as per your requirement. Does this solve your query?

Adjusting the image in JavaScript and jQuery

Answer №1

Answer №2

Answer №3

Similar questions

Clear a form field automatically in React using react-hook-form when a new value is entered in another field

Class-based Button Transition Effect failing to operate as intended

IE doesn't seem to support framesets, while Mozilla browsers handle them just fine

How to use jQuery to recursively assign numbered classes to groups of div elements

Attempting to populate getElementByID using JavaScript function from CodeBehind proves unsuccessful

Trying to update React and Electron, encountering the error message "global is not defined"

Issues arise when the Slick functionality fails to load following an ajax request

Create a circular motion animation from scratch

Total sum displayed within the Apex interactive grid

Utilizing Vue.js and Webpack to Handle Requests for Multiple Incorrect Resource Links

Contrast between sourcing a file from the current directory versus from the node_modules folder

Retrieve all checkboxes that have been altered using jQuery

Decomposition of words in VueJS based on numerical values

Creating fresh CSS by extracting essential selectors from an existing CSS file using Javascript

When utilizing jQuery in HTML, the Marquee will bounce back upon reaching the end

What is the best way to display or hide specific tables depending on the button chosen?

Transform website code into email-friendly HTML code

Saving a value in a service using AngularJS

Error encountered when attempting to load files from the same domain due to CORS restrictions

Is there a way to identify if the parent page has completed loading while within an iframe?