如何使用jquery

Question

我正在尝试根据下拉列表中的选定值动态替换图片src。我为我的网页创建了一个自定义下拉列表。我可以成功设置文本，但我无法替换{{1 }} img具有选定的值。在我的情况下，src位于img标记内。

HTML代码

anchor<a>

Js代码

  <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>

请让我知道如何用下拉列表中的选择图像值替换//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. } ); 。

Answer 1

试试这个：

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

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

Answer 2

$(this) - 这是<a>代码，而不是<img>。

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

Answer 3

您的a有href="javascript:void(0);"，没有关于图片的信息。

您必须访问它的子图像src：

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

您可以为文本添加span包装，并仅更改该部分：

＆＃13;

＆＃13;

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

  $('#browser-text')
    .find('img')
    .attr('src', $('img', this).attr('src'))
  .end()
    .find('span')
    .text($(this).text())
  ;
});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;