如何使用jquery在锚标记内更改图像src

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.

我试图根据下拉列表中的选定值动态替换图像src。我已经为我的网页创建了一个自定义下拉列表。我可以成功设置文本,但我不能用选定的值替换img src。在我的情况下img在锚标签内。

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.

请让我知道如何将drop-text-img替换为下拉列表中的选择图像值。

3 个解决方案

#1

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

你的a有href =“javascript:void(0);”没有关于图像的信息。

You have to access it's child image src:

你必须访问它的子图像src:

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

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

您可以为文本放置span包装器并仅更改该部分:

$('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>

#2

try this:

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

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

#3

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

$(this) - 这是标签,而不是如何使用jquery在锚标记内更改图像src 。

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

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

#1