1

Web サイトでアイコン フォントを使用しており、ユーザーにお気に入りのアイコンに投票してもらいたいと考えています。アイコン フォントは 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 に答える