javascript - Bootstrap 按钮组可动态更改文本、HREF 和图标 - JQuery

Question

我有一个使用拆分按钮下拉列表的 Bootstrap 按钮组。我想要做的是，当您从下拉列表中选择一个选项时，按钮上的文本、href 和图标将发生变化。我可以很好地更改文本，但我无法更改 HREF 属性和图标。

HTML

<div class="btn-group">
     <a href="http://google.com" type="button" class="btn btn-default"><span class="standard">Search</span><span class="mobile"><i class="fa fa-search"></i></span></a>
     <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span></button>
     <ul class="dropdown-menu">
          <li><a href="#" data-value="http://google.com" data-icon="fa fa-search">Search</a></li>
          <li><a href="#" data-value="http://yahoo.com" data-icon="fa fa-music">Song Search</a></li>
          <li><a href="#" data-value="http://bing.com" data-icon="fa fa-search-plus">Advanced Search</a></li>
     </ul>
</div>

JavaScript

$(".dropdown-menu li a").click(function(){
     $(this).parents(".btn-group").find('a.btn').html($(this).text());
     $(this).parents(".btn-group").find('a.btn').attr('href') = $(this).data('value');
     $(this).parents(".btn-group").find('a.btn i').removeClass();
     $(this).parents(".btn-group").find('a.btn i').addClass($(this).data('icon'));
});

我想使用数据值，因为从长远来看，这个下拉列表将是动态的，列表将取决于它出现在哪个页面上。

Answer 1

好吧...显然除了 href 部分之外一切都是正确的。

而不是

$(this).parents(".btn-group").find('a.btn').attr('href') = $(this).data('value');

使用

$(this).parents(".btn-group").find('a.btn').attr('href', $(this).data('value'));

我有几个 console.logs 显示更改的结果，并且一切都运行良好。