引导按钮组以动态更改文本、HREF 和图标 - JQuery

Question

我有一个使用拆分按钮下拉列表的引导按钮组。 我想做的是当您从下拉列表中选择一个选项时，按钮上的文本、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'));

我有几个控制台.logs显示更改的结果，并且一切正常。

Answer 2

HREF

您的 href 不会更改，因为

.attr('href') = $(this).data('value');

不是更改属性的方法。它应该是：

.attr('href', $(this).data('value'));

图标

图标更改不起作用，因为

$(this).parents(".btn-group").find('a.btn').html($(this).text());

从 a.btn 中删除整个内容，其中包括包含包含图标的<i>的<span>。基本上，这条线也删除了<span class="mobile"><i class="fa fa-search"></i></span>，所以没有什么可以removeClass或appendClass:-D！

这是您的工作代码：https://jsfiddle.net/DTcHh/16689/

祝您编码愉快！

Answer 3

试试这段代码。

$(".dropdown-menu li a").on("click",function(){
    var icon = $(this).attr('data-icon');
    var html = $(this).html();
    $(this).parents(".btn-group").find('a.btn').html('<i class="'+icon+'"></i>'+html);
    $(this).parents(".btn-group").find('a.btn').attr('href', $(this).attr('data-value'));
});

Answer 4

您可以执行以下操作：

document.getElementById('elementid').className = 'classname'

或字符串替换：

document.getElementById('elementid').className
= document.getElementById('elementid').className.replace(your replace code)