jquery 图标选择器
时间: 2023-09-06 18:08:19 浏览: 61
你可以尝试使用 Font Awesome 和 Bootstrap Icon 等流行的图标库,它们都提供了方便的 jQuery 插件来实现图标选择器。以下是一个使用 Font Awesome 的示例:
1. 首先,在你的 HTML 文件中引入 Font Awesome 的 CSS 文件:
```html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-7q6b0t8v16gEvCJfKkz6JXUDBJ9Ls3r4xQJXT+nKXJ9dJ6m3o5zB0+gN6vNIxJ7jK8e0D3E5X8z2u9Z3f2dPlQ==" crossorigin="anonymous" />
```
2. 接着,在你的 HTML 文件中创建一个图标选择器的容器:
```html
<div class="icon-picker">
<input type="hidden" name="selected-icon" value="" />
<i class="fas fa-search"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-star"></i>
<i class="fas fa-user"></i>
</div>
```
其中,`selected-icon` 是一个隐藏的表单域,用来存储用户选择的图标名称。
3. 最后,在你的 JavaScript 文件中使用 jQuery 插件来实现图标选择器:
```javascript
$('.icon-picker i').on('click', function() {
// 获取用户选择的图标名称
var iconName = $(this).attr('class').split(' ')[1];
// 将图标名称存储到隐藏的表单域中
$('input[name="selected-icon"]').val(iconName);
// 突出显示用户选择的图标
$('.icon-picker i').removeClass('selected');
$(this).addClass('selected');
});
```
这个示例中,我们使用了 jQuery 的 `on()` 方法来监听图标的点击事件,然后从图标的 `class` 属性中解析出图标名称,并将其存储到隐藏的表单域中。最后,我们使用 jQuery 的 `addClass()` 方法将用户选择的图标突出显示出来。