How to change the source of a child element with JavaScript?

Question

I'm looking to change the source attribute of an image element when my parent element is clicked. The child/image element is actually nested within two div's which complicates things slightly and I have a suspicion this is where i'm going wrong in my code.

The JavaScript is as follows:

    <script src="js/jquery-1.7.2.min.js"></script>
  <script>
      $(document).ready(function () {
          $('.slideContent').hide();
          $('.slideHeader').toggle(
                 function () {
                     $(this).next('.slideContent').slideDown();
                     $(this).children('.dropDownIcon').children('img').src = "./images/dropDownIconUp.png";
                 },
                 function () {
                     $(this).next('.slideContent').fadeOut();
                     $(this).children('.dropDownIcon').children('img').src = "./images/dropDownIconDown.png";
                 }
             ); // end toggle
      }); // end ready

And the HTML is:

<div class="slideHeader">
  <div class="dropDownIcon">
   <img class="dropDownClass" src="./images/dropDownIconDown.png"/>
  </div>
  <div>
   <p>2014</p>
  </div>
</div>
<div class="slideContent">
  <div>
    <p>2014</p>
  </div>
</div>

The slideDown and fadeOut functions from jQuery work fine. However the image change does not happen. So i'm confident my eror is within the following code:

$(this).children('.dropDownIcon').children('img').src = "./images/dropDownIconUp.png";

But as far as I can see, I select the correct elements in my chain. If anyone can shine any light on this it would be much appreciated. As everything else on the internet verifys the code above should work (Whilst a be little messy).

Thanks in advance.

Use [`.prop()`](http://api.jquery.com/prop/) method for changing the `src` property. — Ram, Dec 29 '13 at 17:47
You need to learn the difference between raw DOM objects and jQuery objects. `.src` is a property of DOM objects, not jQuery. — Barmar, Dec 29 '13 at 17:50
please make your question clear before you ask, you said you want a javascript solution and you have tagged jquery — niko, Dec 29 '13 at 17:56

score 1 · Accepted Answer · answered Dec 29 '13 at 17:48

1

src is an attribute of the img tag, so use .attr()

Try,

$(this).children('.dropDownIcon').children('img').attr('src', "./images/dropDownIconUp.png");

answered Dec 29 '13 at 17:48

Rajaprabhu Aravindasamy

66,513
17
101
130

Thanks, works fine. I did see this way used once in another example I found, but all the examples I found online to change the source were using ".src = "string". Is there a reason why this doesn't work in this example, but does in others? – user2585188 Dec 29 '13 at 17:51

score 0 · Answer 2 · answered Dec 29 '13 at 17:50

0

instead of using children selector twice use $(this).find('img').attr('src','./images/dropDownIconUp.png')

answered Dec 29 '13 at 17:50

effe

1,335
3
17
26

score 0 · Answer 3 · answered Dec 29 '13 at 18:13

0

I know you have accepted the answer but let me tell you some points in brief

.src = "blah" would not work for jquery objects.$() always returns a jquery object and you must use .attr() or .prop() to work with jquery objects

However jquery provides a simple way to convert to javascript object

if you still want to use as a javascript object you could it this way

$(".slideHeader").children('.dropDownIcon').children('img')[0].src = "./images/dropDownIconDown.png";

answered Dec 29 '13 at 18:13

niko

9,285
27
84
131

Thanks, I think like Barmar says above, I need to learn the difference between raw DOM objects and jQuery objects. Where is the conversion here? With the [0] after the img element has been found? – user2585188 Dec 29 '13 at 22:30

How to change the source of a child element with JavaScript?

3 Answers3