CODEWITHSUNDEEP
javascriptjqueryhtml
gihan-maduranga
gihan-maduranga

Reputation: 4811

How to change image src within anchor tag using jquery

I am trying to replace image src dynamically based on selected value from the drop down.I have created a custom drop down for my web page.I can set the text successfully but i can not replace img src with selected value.In my case img is inside anchor<a> tag.

HTML Code

  <div class="form-group">
<label class="col-md-2 col-lg-2 control-label"></label>
<div class="col-md-10 col-lg-9">
 <div class="btn-group">
<a id="browser-text" class="btn btn-default" href="javascript:void(0);"><img id="browser-text-img" src="img/safari.png" height="18" width="18"  > Browser</a>
<a class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);"><span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
</li>
<li>
<a class="browser" href="javascript:void(0);"><img src="img/iE.png" height="18" width="18"  > IE</a>

</li>
<li>

</li>

<li>
<a class="browser" href="javascript:void(0);"><img src="img/opera.png" height="18" width="18"  > OPERA</a>

</li>

<li>

</ul>
</div><!-- /btn-group --></td>

</div>
</div>

Js Code

//browser on click func


$('a.browser').click( function() { 

      $("#browser-text").text( $(this).text());//this execute successfully.
      $('#browser-text img').attr('src', $(this).attr('src')); //this nothing happens.
    } );

Please let me know how can i replace browser-text-img with select image value from drop down.

enter image description here

Upvotes: 1

Views: 2955

Answers (3)

Justinas
Justinas

Reputation: 43479

Your a has href="javascript:void(0);" and no information about image.

You have to access it's child image src:

$('#browser-text img').attr(
    'src',
    $('img', this).attr('src')
);

You can put span wrapper for text and change only that part:

$('a.browser').click(function(e) {
  e.preventDefault();

  $('#browser-text')
    .find('img')
    .attr('src', $('img', this).attr('src'))
  .end()
    .find('span')
    .text($(this).text())
  ;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <label class="col-md-2 col-lg-2 control-label"></label>
  <div class="col-md-10 col-lg-9">
    <div class="btn-group">
      <a id="browser-text" class="btn btn-default" href="javascript:void(0);">
        <img id="browser-text-img" src="img/safari.png" height="18" width="18"><span>Browser</span>
      </a>
      <a class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);"><span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li>
        </li>
        <li>
          <a class="browser" href="javascript:void(0);">
            <img src="https://upload.wikimedia.org/wikipedia/en/thumb/1/10/Internet_Explorer_7_Logo.png/64px-Internet_Explorer_7_Logo.png" height="18" width="18">IE</a>

        </li>
        <li>

        </li>

        <li>
          <a class="browser" href="javascript:void(0);">
            <img src="http://blogs.sitepointstatic.com/images/tech/278-opera-10.5.png" height="18" width="18">OPERA</a>

        </li>

        <li>

      </ul>
    </div>
    <!-- /btn-group -->

  </div>
</div>

Upvotes: 2

yousef sami
yousef sami

Reputation: 263

try this:

$('a.browser').click( function() { 

      $("#browser-text").text( $(this).text());//this execute successfully.
      $('#browser-text img').attr('src', $(this).find('img').attr('src'));
    } );

Upvotes: 4

Indra
Indra

Reputation: 111

$(this) — this is <a> tag, not <img>.

Try: $('#browser-text img').attr('src', $('img', this).attr('src'));

Upvotes: 3

Related Questions