1

我在我的网站上使用图标字体，我希望用户对他们最喜欢的图标进行投票。图标字体使用和 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();
     });
 });
4

2 回答 2

1

也许这更多是您正在寻找的？

我修复了点击处理程序：

$("#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 以适应上述更改。

于 2013-07-29T23:04:55.447 回答
0

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

$("#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为您的保存脚本名称。

于 2013-07-29T22:56:35.300 回答