如何通过jQuery (bootstrap-iconpicker)更改数据图标属性？

Question

我正在使用引导图标选择器(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。

请看下面修改后的代码：

​

$( "#click" ).click(function() {
  $('.icon').attr('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 2

如果您尝试选择具有glyphicon-bomb的data-icon属性的图标，则使用：

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

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

Answer 3

我也有过一段艰难的时光。data-icon就是不能工作(bug?)

这对我来说是可行的：

设置字形

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

删除当前字形

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

您必须小心不要忘记前缀glyphicon- -至少对于Bootstrap glyphs来说是这样