Changing source of an img

Question

HTML

<div class="r dd-menu-container fs18" id="header-status">
  <a href="#" id="availability" class="dd-trigger" style="display: block; padding: 10px;">
    <span>
       <img id="availabilityImage" src="{{STATIC_URL}}img/crm/online.png">
                    </span>&nbsp;ONLINE
    <span class="icon-down-dir"></span>
  </a>
  <ul class="dd-menu">
    <li>
      <a href="#"><span><img src="{{STATIC_URL}}img/crm/away.png"></span>&nbsp;AWAY</a>
    </li>
    <li>
      <a href="#"><span><img src="{{STATIC_URL}}img/crm/inacall.png"></span>&nbsp;IN A CALL</a>
    </li>
    <li>
      <a href="#"><span><img src="{{STATIC_URL}}img/crm/inabreak.png"></span>&nbsp;IN BREAK</a>
    </li>
    <li>
      <a href="#"><span><img src="{{STATIC_URL}}img/crm/online.png"></span>&nbsp;ONLINE</a>
    </li>
    <li>
      <a href="#"><span><img src="{{STATIC_URL}}img/crm/offline.png"></span>&nbsp;OFFLINE</a>
    </li>
  </ul>
</div>

Javascript

menuApp = Backbone.View.extend({
  el: $('nav, #header-middle, #header-status'),
  events: {
    'click .dd-menu li a': 'optionChange',
  },
  optionChange: function(e) {
    var $a = $(e.currentTarget);
    var $img = $a.find('img');
    var selectedItemText = $a.text();
    var
      selectedItemSrc = $img.attr('src');
    $("#availability").text(selectedItemText);
    $("#availabilityImage").attr('src', selectedItemSrc);
  }
});

When I click the menu and select for example "Online" with green ball, I expected to change the img of it from this code.

$("#availabilityImage").attr('src', selectedItemSrc); 

But it does not change my img, it only changes text. Do you have any idea about my problem?

Thanks

Answer 1

The problem is here:

<a href="#" id="availability" class="dd-trigger" style="display: block; padding: 10px;">
    <span>
    <img id="availabilityImage" src="{{STATIC_URL}}img/crm/online.png">
    </span>&nbsp;ONLINE<span class="icon-down-dir"></span>
</a>

#availabilityImage is inside #availability, so when you do

$("#availability").text(selectedItemText);

you remove the image entirely, so the next line has no effect because that img element is no longer in the DOM.

Options:

1. Move #availabilityImage outside #availability.

2. Put a span around the text you want to change, e.g.:

   <a href="#" id="availability" class="dd-trigger" style="display: block; padding: 10px;">
       <span>
       <img id="availabilityImage" src="{{STATIC_URL}}img/crm/online.png">
       </span>&nbsp;<span class="text">ONLINE</span><span class="icon-down-dir"></span>
       <!-- Note ---^^^^^^^^^^^^^^^^^^^------^^^^^^^    -->
   </a>
   

   ...and then do

   $("#availability .text").text(selectedItemText);
   

   to replace just the text inside that span.