如何使用jquery更改锚标记中的图像src [英] How to change image src within anchor tag using jquery

问题描述

我试图根据从下拉列表中选择的值动态地替换图片 src 。我为我的网页创建了自定义下拉列表。我可以设置文本但我无法用选定的值替换 img src 。在我的情况下 img 位于锚点

code>并且没有关于图片的信息。

你必须访问它的子图像 src ： （
'src'，
$（'＃

  $（'＃browser-text img' img'，this）.attr（'src'）
）; 
  

---

您可以将跨度

真正的>

$（'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-textclass =btn btn-defaulthref =javascript：void（0）;> < img id =browser-text-imgsrc =img / safari.pngheight =18width =18>< span>浏览器< / span> < / A> < a class =btn btn-default dropdown-toggledata-toggle =dropdownhref =javascript：void（0）;>< span class =caret>< / span>< ; / A> < ul class =dropdown-menu> <李> < /锂> <李> < a class =browserhref =javascript：void（0）;> < img src =https://upload.wikimedia.org/wikipedia/en/thumb/1/10/Internet_Explorer_7_Logo.png/64px-Internet_Explorer_7_Logo.pngheight =18width =18> IE< / A> < /锂> <李> < /锂> <李> < a class =browserhref =javascript：void（0）;> < img src =http://blogs.sitepointstatic.com/images/tech/278-opera-10.5.pngheight =18width =18> OPERA< / a> < /锂> <李> < / UL> < / DIV> <！ -  / btn-group  - > < / div>< / div>  

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.

解决方案

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>

这篇关于如何使用jquery更改锚标记中的图像src的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！