javascript - jquery get img src onclick event - Stack Overflow

Thanx

I am having trouble referring to an image on an onclick evet.

my example is that the "this" reference points to an element that has couple of images and i want to change a specific image.

<li  class = "header_det">
    <table  width="100%" style="font-size:14px;"> 
        <tr>                                      
            <td  width="10%" align = "right" rowspan = "2">text</td>
            <td width="80%"><img width="30" height="30" src="images/map_white_pin.png" ></a></td>                                                                               
            <td width="10%" align = "center" class = "header_pic"><img width="20" height="20"     src="images/route_det/down_arrow.png" ></td>                
        </tr>                                                                           
    </table>
</li>

The js code for the onclick event is this:

$(".header_det_map").click(function() {
    var img_type = $(this).attr(".header_pic img").attr("src") ;
    if(img_type == "images/route_det/down_arrow.png") { 
        $(this).attr(".header_pic img").attr('src', "images/route_det/up_arrow.png");         
    } else{
        $(this).attr(".header_pic img").attr('src', "images/route_det/down_arrow.png");
    }
});

this code doesn't work, and i have to use the this pointer because i have other

Thanx

• javascript
• jquery
• html

• 2 in your code you search header_det_map but in your html it's just header_det. Is this correct or is this not the full html for the problem? – TeeDeJee Commented Sep 17, 2014 at 12:30

2 Answers 2

I think this line:

var img_type = $(this).attr(".header_pic img").attr("src") ;

should be:

var img_type = $(this).find(".header_pic img").attr("src") ;

All you jquery is wrong : .header_pic img is not an attribute but an element of .header_det_map

Plus, you're HTML is a bit messy :

• You shouldn't have space between attribute name and value in your HTML
• There is closing </a> tags
• You should close '<img /> tags

<li class="header_det">
    <table width="100%" style="font-size:14px;"> 
    <tr>                                      
        <td width="10%" align="right" rowspan="2">text</td>
        <td width="80%">
            <img width="30" height="30" src="images/map_white_pin.png" />
        </td>                                                                             
        <td width="10%" align="center" class="header_pic">
            <img width="20" height="20" src="images/route_det/down_arrow.png" />
        </td>                  
    </tr>                                                                           
    </table>
</li>

$(".header_det_map").click(function() {
    var img = $(this).find(".header_pic img"); // use a variable to store your image element in case you have to change the container class
    var img_type = img.attr("src"); // not necessary to store it, could be use as it in the if statement

    if(img.attr("src") == "images/route_det/down_arrow.png") { 
        img.attr("src", "images/route_det/up_arrow.png");         
    } else {
        img.attr("src", "images/route_det/down_arrow.png");
    }
});

本文标签： javascriptjquery get img src onclick eventStack Overflow