CODEWITHSUNDEEP
jqueryhtml
Amiga500
Amiga500

Reputation: 6141

Jquery DOM Manipulation - changing span

I have following HTML:

<div id="open_19" class="smile">
      <span><img src="http://localhost:3000/frontent_images/smiley.png"> </span>
      <span id="sum_19" class="value">12</span>
 </div>

When the user click on that id, the first span should change its src to another image (smiley_light.png). I am having problems getting to that span to change its value.

If I use:

jQuery('.smile span img').mouseover(function(){
//jQuery(this).attr('src','/frontent_images/smiley_light.png');

});

It works, but I need direct control over it, since programatically I need ability to change that span.

I have tried the following, and it only adds another span instead of overwritting the existing one:

$("#open_" + mainid[1]).next("span").attr('src','/frontent_images/smiley_light.png');

Ideas?

Upvotes: 0

Views: 137

Answers (3)

thitemple
thitemple

Reputation: 6059

If the click you're capturing is on the div you could do this:

$("#open_19").click(function(){
  $("img", this).attr("src", "/frontent_images/smiley_light.png");
});

This way you're only capturing the img elements inside the element that triggered the click event.

By the way, with this line:

$("#open_" + mainid[1]).next("span").attr('src','/frontent_images/smiley_light.png');

You're trying to select an span element that is in the same level as your div. In your html you don't have that. Also, a span element doesn't have a src attribute.

Here's a JSFiddle of that code.

Upvotes: 1

palerdot
palerdot

Reputation: 7652

what you are doing will create a new span sibling to your clicked div . . . . . try changing next() to children() and use the pseudo selector 'span:first' 

        $("#open_" + mainid[1]).children("span:first").attr('src','/frontent_images/smiley_light.png');

Upvotes: 0

Simon
Simon

Reputation: 349

jQuery('.smile span img').mouseover(function(el){
   jQuery(el).attr('src','/frontent_images/smiley_light.png');
});

Not sure if this works, but try to pass the element to the function and use it later instead of "this"

Upvotes: 0

Related Questions