Question

我正在使用bootstrap图标选择器（http://victor-valencia.github.io/bootstrap-iconpicker/），我想通过按钮点击通过jQuery更改默认图标。有些东西不起作用，我无法弄清楚：

$( "#click" ).click(function() {
  $('.icon').data('icon', 'glyphicon-bomb');
});

<link rel="stylesheet" href="http://victor-valencia.github.io/bootstrap-iconpicker/icon-fonts/elusive-icons-2.0.0/css/elusive-icons.min.css" />
<link rel="stylesheet" href="http://victor-valencia.github.io/bootstrap-iconpicker/icon-fonts/font-awesome-4.2.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="http://victor-valencia.github.io/bootstrap-iconpicker/bootstrap-iconpicker/css/bootstrap-iconpicker.min.css" />


<script src="http://victor-valencia.github.io/bootstrap-iconpicker/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://victor-valencia.github.io/bootstrap-iconpicker/bootstrap-3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://victor-valencia.github.io/bootstrap-iconpicker/bootstrap-iconpicker/js/iconset/iconset-glyphicon.min.js"></script>
<script type="text/javascript" src="http://victor-valencia.github.io/bootstrap-iconpicker/bootstrap-iconpicker/js/iconset/iconset-all.min.js"></script>
<script type="text/javascript" src="http://victor-valencia.github.io/bootstrap-iconpicker/bootstrap-iconpicker/js/bootstrap-iconpicker.js"></script>


<button class="icon btn btn-default" data-iconset="glyphicon" data-icon="glyphicon-camera" role="iconpicker"></button>

<div id="click">Click here to change the icon</div>

Answer 1

问题是您没有正确指定data-icon。 data必须包含在选择器名称中。

请参阅以下更改的代码：

＆＃13;

$( "#click" ).click(function() {
  $('.icon').attr('data-icon', 'glyphicon-bomb');
});

＆＃13;

<link rel="stylesheet" href="http://victor-valencia.github.io/bootstrap-iconpicker/icon-fonts/elusive-icons-2.0.0/css/elusive-icons.min.css" />
    <link rel="stylesheet" href="http://victor-valencia.github.io/bootstrap-iconpicker/icon-fonts/font-awesome-4.2.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="http://victor-valencia.github.io/bootstrap-iconpicker/bootstrap-iconpicker/css/bootstrap-iconpicker.min.css" />


<script src="http://victor-valencia.github.io/bootstrap-iconpicker/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://victor-valencia.github.io/bootstrap-iconpicker/bootstrap-3.2.0/js/bootstrap.min.js"></script>

<script type="text/javascript" src="http://victor-valencia.github.io/bootstrap-iconpicker/bootstrap-iconpicker/js/iconset/iconset-glyphicon.min.js"></script>

<script type="text/javascript" src="http://victor-valencia.github.io/bootstrap-iconpicker/bootstrap-iconpicker/js/iconset/iconset-all.min.js"></script>
<script type="text/javascript" src="http://victor-valencia.github.io/bootstrap-iconpicker/bootstrap-iconpicker/js/bootstrap-iconpicker.js"></script>

<button class="icon btn btn-default" data-iconset="glyphicon" data-icon="glyphicon-camera" role="iconpicker"></button>


<div id="click">Click here to change the icon</div>

＆＃13;

Answer 2

如果您尝试选择数据图标属性为glyphicon-bomb的图标，请使用：

$('.icon[data-icon="glyphicon-bomb"]').

编辑：在我看到编辑之前发布。

Answer 3

我也很难受。 data-icon事情不起作用（bug？）

这样对我有用：

设置字形

$("#buttonid").iconpicker("setIcon", "glyphicon-leaf");

删除当前字形

$("#buttonid").iconpicker("setIcon", "glyphicon-");

您必须小心不要忘记前缀glyphicon- - 至少对Bootstrap glyphs

而言

如何通过jQuery（bootstrap-iconpicker）更改data-icon属性？

3 个答案: