jquery實現根據不同class為多個按鈕新增點選事件
阿新 • • 發佈：2019-02-03
一、實現功能
在專案中需要新增幾個button來實現點選不同的button就可以設定字母的顏色。但是button上面不能有文字。所以不能根據$('button').html()獲取button的文字來設定顏色。最後想出使用button的class的不同來設定顏色。
在這裡使用div來取代button，這樣的顯示效果更好，不用受button自帶效果的影響。
二、具體實現
main.js中的實現程式碼如下：
var colorSelect = { 'one': 'F08080', 'two': 'ADD8E6', 'three': 'FFFF00', 'four': 'FFA07A', 'five': '90EE90', 'six': '9370DB', 'seven': '6BDAEA' } var color = parseInt('0x' + 'ff0000'); /*var colorBtnArray = document.getElementsByClassName('color_select_panel');*/ $('.color_select').click(function () { var tempClass = $(this).attr('class').split(' '); console.log('color = ' + tempClass[1]); color = colorSelect[tempClass[1]]; //這樣就可以實現根據div 中class的不同而更改顏色。});
html中：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="https://cdn.bootcss.com/normalize/4.2.0/normalize.min.css"/> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css"/> <link rel="stylesheet" href="https://cdn.bootcss.com/ionicons/2.0.1/css/ionicons.min.css"/> <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css"/> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css"> <link rel="stylesheet" href="css/danmu.css" /> <script src="js/CommentCoreLibrary.min.js"></script> </head><body> <div class="msg_color_drop" style="display: block"> <div class="color_select_panel"> <div class="color_select one"></div> <div class="color_select two"></div> <div class="color_select three"></div> <div class="color_select four"></div> <div class="color_select five"></div> <div class="color_select six"></div> <div class="color_select seven"></div> </div> </div> </body> <script src="js/main.js"></script> <script> </script> </html>