CODEWITHSUNDEEP
javascriptjqueryhtml
m33bo
m33bo

Reputation: 1354

jquery swap image on element click not functioning

I am trying to swap an image on click with jquery. I have got it to work with the click being bound to the image class. However, if I try and wrap the function and bind the event to a button or anchor, it will not swap the images. Here is the jquery:

<script type="text/javascript">
jQuery(document).ready(function( $ ) {
$(".test_toggle").click(function(){
    $(this).find(".img-swap").live('click', function() {
        if ($(this).attr("class") == "img-swap") {
          this.src = this.src.replace("_off","_on");
        } else {
          this.src = this.src.replace("_on","_off");
        }
        $(this).toggleClass("on");
    });
});
});
</script>

This worked:

jQuery(document).ready(function( $ ) {
  $(".img-swap").live('click', function() {
  if ($(this).attr("class") == "img-swap") {
    this.src = this.src.replace("_off","_on");
  } else {
    this.src = this.src.replace("_on","_off");
  }
  $(this).toggleClass("on");
  });
});

Any help is greatly appreciated.

Upvotes: 0

Views: 185

Answers (4)

Moob
Moob

Reputation: 16184

I don't think there's any need to delegate the event listeners so I've removed them. Simply add the click event to the image and then you can manually 'trigger' a click on it when the .test-toggle is clicked. E.G:

$(function() {
  
    //add on click event
    $(".img-swap").on('click', function() {
        if (this.src.indexOf("_off")>0) {
            this.src = this.src.replace("_off","_on");
        } else {
            this.src = this.src.replace("_on","_off");
        }
    });
  
    //add remote trigger
    $(".test_toggle").on('click', function(){
        $(".img-swap").trigger("click");
    });
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="img-swap" src="https://placehold.it/300?text=_off" />
<button class="test_toggle">test toggle</button>

Upvotes: 1

m33bo
m33bo

Reputation: 1354

I have re-written the js, but not tested. Can I nest clicks?

$(".test_toggle").click(function(){
    $.find(".img-swap").click(function(){
        if ($(this).attr("class") == "img-swap") {
        this.src = this.src.replace("_off","_on");
        } else {
        this.src = this.src.replace("_on","_off");
        }
        $(this).toggleClass("on");
    });
});

Upvotes: 0

Marcin Dusza
Marcin Dusza

Reputation: 432

I would delete this line: 

 $(this).find(".img-swap").live('click', function() {

What is it's purpose? You can swap this image right after the first click, right? Also, make sure that .img-swap is inside the tag with class test_toggle. You are using:

$(this).find(".img-swap")

find() searches only in children of selected element.

If it's not nested use

$(".img-swap")

instead of:

 $(this).find(".img-swap")

Upvotes: 0

Nishanth Matha
Nishanth Matha

Reputation: 6081

Thats because unlike like img.

a or button doesn't have a src attribute.

So when you bind the event to a button or anchor, this.src in your second instance of the code will be invalid.

Upvotes: 0

Related Questions