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，它们都运行良好。

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中删除整个内容，其中包含，其中包含包含图标的。基本上，此行也会移除，因此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)

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

4 个答案: