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

【问题标题】：Bootstrap Button Group to dynamically Change Text, HREF and Icon - JQuery引导按钮组动态更改文本、HREF 和图标 - JQuery
【发布时间】：2016-02-05 16:12:24
【问题描述】：

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

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

【问题讨论】：

您在下面阅读我的回答了吗？你的问题解决了吗？

标签： javascript jquery html twitter-bootstrap font-awesome

【解决方案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 显示了更改的结果，并且一切正常。

【讨论】：

【解决方案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 中删除整个内容，其中包括 ，其中包含包含图标的 。基本上，这一行也删除了，所以removeClass 或appendClass 没有任何东西要留给:-D！

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

编码愉快！

【讨论】：

【解决方案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'));
});

【讨论】：

您将 放回原处，这也是一种选择...但是您仍然在第一次更改时删除了两个s。查看我的解决方案，它更简洁一些，因为它不会覆盖a.btn 的整个html 内容，而只是覆盖span.standard

【解决方案4】：

你可以这样做：

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

或字符串替换：

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

【讨论】：

我认为这不是问题...问题是在 <a class="btn"> 的内容被新的替换后，包含 fontAwesome 图标的整个 <ì> 不再存在带有html() 命令的文本；-)