Question

我在我的网站上使用图标字体，我希望用户对自己喜欢的图标进行投票。图标字体使用CSS和CSS来显示图标。如何使用某种类型的jQuery完成此操作并将图标返回到前端并将值传递给表单？

我知道我无法添加输入内部，所以我采用了这种方法：

我从这个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以适应上述更改。

Answer 2

您需要一个服务器端脚本来保存数据。如果你有一个脚本，你可以这样使用它：

$("#iconSelector span").click(function () {
    var xthis = $(this);
    xthis.click(function(){
        $("#iconSelector").hide();
        $.post('/echo/html','icon='+$(xthis).attr('class'),function(){
            $(".iconDisplay").html(xthis.get(0));
        });
    });
});

完全小提琴：http://jsfiddle.net/6NVpL/45/

PS。将/echo/html更改为您的保存脚本名称。

在表单中创建可选图标

2 个答案: