如何通過jQuery（bootstrap-iconpicker）更改數據圖標屬性？

我正在使用引導圖標選擇器（http://victor-valencia.github.io/bootstrap-iconpicker/），我想通過按鈕點擊通過jQuery更改默認圖標。有什麼不工作，我不能弄明白：如何通過jQuery（bootstrap-iconpicker）更改數據圖標屬性？

$("#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>

來源

2016-11-23 Jarla

你說你想選擇它，但你的代碼說你想改變它的數據圖標屬性。問題是哪個？ – winseybash

@winseybash我更新了我的問題，以便更清楚 – Jarla

如果你想選擇與glyphicon-bomb數據圖標屬性的圖標，然後使用：

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

編輯：在我看到編輯之前發佈。

來源

2016-11-23 13:48:25 seantunwin

我測試它完全像你寫的，但它仍然無法正常工作。你在一個小提琴或代碼片段中測試它嗎？ – Jarla

我編輯了我的答案，因爲我忘記在圓括號內放置包裝引號。 – seantunwin

問題是您沒有正確指定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>

來源

2016-11-23 13:49:16 winseybash

我測試了它，但它不工作。您的代碼片段是否可以在您的瀏覽器中運行？ – Jarla

@Jarla我的更改現在更新按鈕上的'data-icon'屬性，這就是您的問題所要求的。 – winseybash

好吧，我明白了。我認爲這會改變默認的選定圖標。但它不會;（ – Jarla

我有一個困難時期這一點。該data-icon東西只是不工作（錯誤？）

這樣，它的工作對我來說：

設置字形

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

刪除當前字形

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

你必須小心不要忘記前綴glyphicon- - 在l東部爲Bootstrap glyphs

來源

2017-03-23 20:51:01

如何通過jQuery（bootstrap-iconpicker）更改數據圖標屬性？

回答

相關問題