html - 在表单中创建可选择的图标

Question

我在我的网站上使用了一种图标字体，我希望用户投票选出他们最喜欢的图标。图标字体使用 CSS 来显示图标。我如何使用某种类型的 jQuery 并将图标返回到前端并通过表单传递它的值来完成此操作？

我知道我不能在输入中添加一个 inside，所以我采用了这种方法:

我从这个 jsFiddle 开始:http://jsfiddle.net/6NVpL/42/

HTML:

 <div class="iconDisplay">Display's selected icon</div>

 <button class="selectIcon">Select Icon</button>

 <div id="iconSelector">
     <span class="icon-icon1"></span>
     <span class="icon-icon2"></span>
     <span class="icon-icon3"></span>
     <span class="icon-icon4"></span>
     <span class="icon-icon5"></span>
     <span class="icon-icon6"></span>
     <span class="icon-icon7"></span>
     <span class="icon-icon8"></span>
 </div>

JS:

 $(".selectIcon").click(function () {
   $("#iconSelector").fadeToggle();
 });

 $("#iconSelector span").click(function () {
    $(this).click(function(){
        $("#iconSelector").hide();
     });
 });

Answer 1

也许 this是您正在寻找的更多内容吗？

我修复了点击处理程序:

$("#selectIconButton").click(function () {
    $("#iconSelector").fadeToggle();
});

$("#iconSelector span").click(function () {
    selectIcon($(this));
});

添加了执行图标选择的功能。注意:删除 return; 语句并调整帖子，使其适用于您的应用程序。

function selectIcon(e){
    var selection = e.attr('class');
    $('#selectedIcon')
        .removeClass()
        .addClass(selection)
        .show();
    $("#iconSelector").hide();
    return;
    $.ajax({
        url: 'urltowebsite',
        type: 'POST',
        data: { selectedIcon: selection }
    });
}

添加了一个 UI 元素以向用户显示他们选择的图标并稍微修改了 CSS 以适应上述更改。